The initial value in the textarea field

Recently, I have been experimenting with adding a default value to a textfield using the code below:

<textarea name="message" id="message" cols="30" rows="5" value="Comment"
    class="form_text text-input shadow" title="Comment"
    onblur="if (this.value == '') {this.value = 'Comment';}" 
    onfocus="if (this.value == 'Comment') {this.value = '';}">
</textarea>

My experience has shown that this method only partially works. Initially, the field does not show the default value of "Comment," but after clicking inside the textarea and then outside without typing anything, it displays "Comment."

I am now seeking advice on how to modify this code so that "Comment" appears when the form loads. Any suggestions would be greatly appreciated.

jqueryhtmlcss

Answer №1

It is important to always wrap the default text in textarea tags.

<textarea> Here is the default text for demonstration </textarea>

Answer №2

<input type="text">initial text</input>

This solution should work wonders.

Answer №3

Avoid using the value attribute and try this instead:

<textarea name="message" id="message" cols="30" rows="5"
    class="form_text text-input shadow" title="Comment"
    onblur="if (this.innerHTML == '') {this.innerHTML = 'Comment';}" 
    onfocus="if (this.innerHTML == 'Comment') {this.innerHTML = '';}">
Comment
</textarea>

Answer №4

When working with textarea elements, remember that it is the innerHTML property that should be used instead of the value attribute. Using value="Comment" is not the correct way to set the value.

Here is a better approach:

<textarea name="message" id="message" cols="30" rows="5" 
   class="form_text text-input shadow" title="Comment"  
   onblur="if (this.value == '') {this.value = 'Comment';}" 
   onfocus="if (this.value == 'Comment') {this.value = '';}">
   Comment
</textarea>

Answer №5

The <textarea> element does not have a value attribute : the content between the open and close tags is considered as the default value:

<textarea>My default value</textarea>

In JavaScript, you can retrieve this text using .innerHTML (or with jQuery using .val()).

To achieve the desired functionality, HTML5 placeholder attribute can be utilized along with a jQuery polyfill for older browsers from here.

Answer №6

<textarea>Enter text here</textarea>

If you prefer, you have the option to set the value using JavaScript when the page loads by utilizing $(document).ready() in jQuery.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

methods to retrieve value from a javascript function

Just a quick inquiry - what's the best way to pass or return a value from a function? Here is my code: function numberOfDivs(){ var numberOfElements = $("#div").children().length; // Counting the number of existing divs return numberOfElements; } ...

javascriptjquery

The CSS variables set within the :root section of styles.scss are not recognized as valid

Trying to implement global colors using CSS variables in my Angular 11 app. The styles.scss file contains: :root{ --primary : #0b68e8; --secondary:#ABCFFF; } .test-class{ background: var(--primary); } However, when applying this class in one ...

cssangularsasscss-variables

Tips for integrating properties into the class in jQuery

My goal is to assign properties to a class and then inherit them into individual DIV IDs. However, something seems to be off with my code. What could it be? var startItem1X = randomRange(50,100); var startItem1Y = randomRange(50,100); var startItem2X = ra ...

jquerycss

Is it possible to use VueJS (JavaScript) to submit a form within a PHP file?

Recently, I've been working on updating an old PHP file that includes a form and a table. The code snippet below gives an overview: printf ("<form action=\"%s\" method=post>", $PHP_SELF); //this is the url printf (& ...

javascriptphphtmlvue.js

Using jQuery tools, the root element of the scrollable is set to be relatively positioned instead

While browsing this page, I noticed that it states the root element for scrollable items must be absolutely positioned. However, I encountered issues when attempting to resize the container for scrollable items based on the height of the scrolling child el ...

jquerycssjquery-tools

Symfony 2 can be configured to add a "data-*" attribute to each radio input field in a form entity

Within my form, I have a field named "membership" that displays radio buttons. Here is the code snippet: ->add( 'membership', 'entity', array( 'class' => 'Comit ...

htmlformssymfony

Struggling with implementing jQuery AJAX in Node.js Express - any tips?

Struggling with implementing ajax in node js for the first time. I've been testing it using the console, but unable to get a response. Here's my code: <script> function getMessage() { var data = $("#messageselect").val() $.ajax({ ...

javascriptjqueryajaxnode.jsexpress

Enhance Selenium automation by consolidating duplicate code for repetitive tasks in Python

While working with Python and Selenium, I encountered a situation where I needed to find the element with the CSS Selector '#results .page_block_sub_header_count' multiple times on a page. elem = driver.find_element_by_css_selector('#result ...

pythoncssselenium

Improved method for displaying or concealing a sequence of input fields

I have implemented a solution using a variable to manage the display of textboxes when a user clicks on a checkbox. There are 4 checkboxes in a series, and clicking on any one of them triggers the appearance of a corresponding textbox. While my current imp ...

javascriptjqueryhtml

Encountering an issue while attempting to install an SSL certificate on my server. The error message displayed is: "ERROR:

Unique HTML Code: <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="farmapp.css"> </head> <body onload=&qu ...

javascripthtmlcssnode.jsexpress

Tips for implementing the hover span property in Angular 2

I would like to create a hover effect for the Major span element as illustrated in the image below. The desired outcome is for the span to transform into a story span upon hovering, complete with a bordered outline and an edit icon. I am looking for some C ...

htmlcssangular

Having trouble with a Javascript function not executing upon form submission

I decided to give this tutorial a try: and I'm experimenting with it on my sandbox site here: But, when I click the submit button on the form to add a problem, nothing happens. There isn't even any output in the Chrome JavaScript console. I tr ...

javascriptjqueryhtmlajax

The behavior of the jQuery click function seems to be quirky and not functioning as expected. Additionally, the

It seems that instead of triggering a POST request, somehow a GET request is being triggered. Additionally, the ajax call is not being made as expected. I have attempted this many times before, but none of my attempts seem to be working. It could potenti ...

javascriptjqueryajax

Adding an onclick event to an image dynamically - a step-by-step guide

My current project involves dynamically creating images with the use of jQuery to add an onclick property. function create() { divElem = $("<div class='row'>"); $('#bankList').append(divElem); elem = $("<div ...

javascriptjquery

Utilizing Codeigniter and Select2 to dynamically update input fields on change

Need help with loading data in InputBox based on select2 change event https://i.sstatic.net/7HzGz.jpg How can I dynamically populate the InputBox when the select2 option is changed? View <div class="form-row"> <div class="for ...

javascriptphphtmlformscodeigniter

The method of displaying the date is determined by the starting date

I have a pair of datepickers and I want the to date to be based on the selected from date. The to date should always be one day after the selected from date, ensuring they are not the same. For example: If I select 'from' 07/18/2018, the ' ...

javascriptjquerydatepickerjquery-ui-datepicker

Different width, same height - images arranged side by side in a responsive layout

The problem lies in the images: https://i.sstatic.net/rydNO.png Here is an example of desktop resolution: https://i.sstatic.net/uv6KT.png I need to use default size pictures (800x450px) on the server. This means I have to resize and crop them with CSS to ...

javascriptjqueryhtmlcssimage

The essence of my design disappears when I generate a canvas object using Fabric.js

After defining top and left attributes for a Canvas Object using a JavaScript function, I encounter an issue when creating a fabric Canvas object. var fabricCanvas = new fabric.Canvas('mycanvas'); Upon creation, my HTML Canvas has its top and ...

javascripthtmlcanvasfabricjs

Arranging text within a td cell

This is what I currently have: <tr> <td colspan="4" style="font-size:7pt; font-color:red; font-weight: bold;"> PLEASE NOTE: SPECIFY THE ARTICLE IN AS MUCH DETAIL AS POSSIBLE </td> </tr> However, the text does not a ...

htmlcss

Incorporating Ajax content in Struts 2 with the Struts2 Dojo Extension

I'm facing a minor issue with loading content through an Ajax call in Struts 2 (using the Struts2 Dojo Plugin). It's able to load all the HTML content from the page successfully, but it seems to have trouble loading any inline JavaScript function ...

javajqueryajaxjspstruts2