If you have applied somewhere online, or asked for a particular thing using the contact forms of the websites, you will most probably have seen those use a text-area field for the argumentation. It is a highly convenient feature of Javascript, and if you now want to add it to your own website, I would completely agree. But how can you do this exactly? See below!<\/p>\n
The <textarea> tag represents an HTML element that consists of a text input field with multiple rows. It can hold an unlimited number of characters and usually has Courier set as it’s fixed font. There are two ways to define it’s size, one being by specifying the number of it’s columns and rows and the second can be done through the usage of CSS’ This element has a corresponding object in Javascript which is the Textarea Object. It is supported by every browser, and is one of the many who got to be improved a lot with the presenting of HTML5 for everyone, as many other properties and methods were added to it. This element supports all the Global and Event attributes in HTML and implements the HTMLElement interface as every other element, but except from that also implements the HTMLTextAreaElement interface. Let’s see each of these aspect of the <textarea> element separately below. We mentioned above that as <textarea> is an element who got to be changed and improved a lot with the usage of HTML5. This happened because a number of new attributes were added to it.<\/p>\n Two of the most basic attributes of the element are The The Another attribute which has been there since the beginning is Some of the most important attributes that were added with HTML5 are: autocomplete, autofocus, form, maxlength, minlength, placeholder, required, selectionDirection, spellcheck, wrap etc. Let’s see what they do each at a time.<\/p>\n With that, we have explained the most used and most important attributes regarding the <textarea> element.<\/p>\n Except for all the attributes that will help us set a <textarea> element just the way we need it to work, there are also a number of Javascript methods related to it which need to be used in order to make it all work. Some of the most important ones are:<\/p>\n By now you know a lot about the <textarea> element, including a great number of it’s attributes and methods. However some of you might still have some difficulty understanding this element. The best way to clear your doubts? Why, practice, of course. Time for some examples!<\/p>\n There are two ways to create a very basic textarea: using only Javascript and using the <textarea> tag. Let’s see them both in action below!<\/p>\n To create a textarea using strictly plain Javascript we would only need the function which does this and something to trigger it’s execution, which can be either a button being pressed or anything, really. As usual, we will separate the Javascript and HTML parts of our code, even though in our case it’s not strictly necessary. That’s because it’s good programming practice in case you have large chunks of code to deal with!<\/p>\n The heart of it, of course, would be the Javascript code, which we will place in a separate file named textarea.js<\/em><\/span><\/p>\n It is pretty simple to understand what we’ve done here: We create a textarea element, create a text node for it and append it to the first one, and lastly, append these two both to the document body. All this is wrapped into a function, which we will use to trigger the textarea. We would do that by clicking a button which fires this function as soon as it’s clicked. The HTML code would go like below:<\/p>\n textarea.html<\/em><\/span><\/p>\n There you have it!<\/p>\n I think that all would agree with me in saying that the easiest way to create a textarea element would be through using the tag and some of the attributes for this element according to the needs we have. Of course, later on we can add more functionality to it using Javascript functions, but for now, to create it, we would only need the code snippet below:<\/p>\n textarea.html<\/em><\/span><\/p>\n As you can see, we only used the tag together with three of the attributes explained above: A common action regarding textareas is getting the data from them and manipulating it. Let’s see how we can get it and then display it for the user. The HTML code would go like below:<\/p>\n textarea.html<\/em><\/span><\/p>\n In the code above we have kept the textarea we created (and discarded the submit button) and added it an Then, we have created a button which when clicked invokes the function The Javascript code would go like below:<\/p>\n textarea.js<\/em><\/span><\/p>\n As you see, we only have to get the value of our textarea element by using it’s ID, and then pass it to the innerHTML of another element, which we’ve chosen to be the paragraph with the ID value of This was an example of Textareas in Javascript.<\/p>\n If you have applied somewhere online, or asked for a particular thing using the contact forms of the websites, you will most probably have seen those use a text-area field for the argumentation. It is a highly convenient feature of Javascript, and if you now want to add it to your own website, I would …<\/p>\n","protected":false},"author":25,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-11674","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"yoast_head":"\nwidth<\/code> and height<\/code>. <\/p>\n
\n
\n[ulp id=’tCIwOngQUb3zSUuF’]<\/p>\n2. <textarea> attributes<\/h2>\n
2.1 HTML Attributes<\/h3>\n
cols<\/code> and rows<\/code>, both of the integer format, which are used to specify the visible width and length respectively of the input section in regards to an average character size. If specified, they must both be a positive number, else the default value is 20<\/code>. <\/p>\ndisabled<\/code> attribute is a boolean value that shows whether or not the user is to interact with the control. By default this attribute is set to 0, or otherwise inherited by the parent element.<\/p>\nname<\/code> attribute is used to give a name to the control which can be used later to manipulate it’s information.<\/p>\nreadOnly<\/code>, which is a boolean value that shows whether or not the control should be read-only. The difference between this one and disabled<\/code> is that it doesn’t prevent the user from selecting text or clicking in the control, while the first one does. However, readOnly<\/code> does allow to submit the value of the textarea with the form.<\/p>\ndefaultValue<\/code> sets or returns the default value of the control in case it is not completed by the user while form<\/code> returns a reference to the form that contains the text area. We use value<\/code> to set or return the contents of the element, and type<\/code> to get the type of the form element the text area is. <\/p>\n2.2 HTML5 Attributes<\/h3>\n
\n
autocomplete<\/code> – shows whether or not the browser should automatically complete the value of the control or not. When set to off<\/code> the browser does not autocomplete the value, so it’s either explicitly entered by the user or autocompleted by the methods of the document. Otherwise, the browser automatically completes the value based on other values previously entered by the user in the form. <\/li>\nautofocus<\/code> – is a boolean value that allows the control to have input focus when the page loads. Only one of the input fields can have this attribute set to YES<\/code> in a form. <\/li>\nform<\/code> – returns the ID value of the containing form element. In the cases where the <textarea> element is not a descendant of a form element, it will either return the ID value of the containing element, or null<\/code>.<\/li>\nmaxLength<\/code> – specifies the number of characters to be inserted in the control. Usually, it is specified only when you want it to be a different value from that of the default, otherwise it’s left untouched. There is also a similar attribute named minLength<\/code>. Can you guess what it does?<\/li>\nplaceholder<\/code> – is a string which normally offers the user an idea about what to enter in the control. However, it can be whatever you want it to be, and being funny and creative always pays off *hint-hint*.<\/li>\nrequired<\/code> – is used to indicate a value which is customary to be filled before submitting the form, which would make it unable to be submitted if it’s left uncompleted.<\/li>\nselectionDirection<\/code> – is an attribute which specifies the direction in which the selection is required to happen. It can either be forward<\/code> in case the selection happens from the start to finish, or backward<\/code> in case the selection happens starting from the end and going until the start, or none<\/code> in case both of these options are allowed and we have no information on the direction.<\/li>\nspellcheck<\/code> – is a boolean value which when set to TRUE<\/code> shows that the element is to have it’s grammar and spelling checked, and to be left as it is in case it’s set to FALSE<\/code>. It’s value can be inherited from the parent element of which the <textarea> element is descended.<\/li>\nwrap<\/code> – is an attribute that indicates how the control wraps text. It can have two values: hard<\/code> and soft<\/code>. The first one inserts a line break so that each line has no more character than the width of the control, which is also why setting the attribute to this value, you will have to also specify the cols<\/code> value. The second one, soft<\/code>, is also the default value for wrap<\/code> in case it’s left unspecified, and is used to show the browser that it’s to respect any line break pair (CR+LF) but not insert any on it’s own accord. <\/li>\n<\/ul>\n3. <textarea> methods <\/h2>\n
\n
select()<\/code> – selects all the contents of the control<\/li>\nfocus()<\/code> – similarly to the focus<\/code> attribute, this method gives input focus to the control<\/li>\nblur()<\/code> – reverses the effect of focus()<\/code>, which means that it removes input focus to the control. This method and also focus()<\/code> are inherited from the HTMLElement interface starting from HTML5 and on, but needed to be defined in earlier versions. <\/li>\ncheckValidity()<\/code> – this method returns a boolean value as it’s final result. This value would be TRUE<\/code> in the cases where the control is not a candidate for constraint validation or it’s criteria is fulfilled, and FALSE<\/code> when these constraints are not fulfilled. <\/li>\nsetCustomValidity()<\/code> – would return a custom string (presumably hinting at what’s wrong) in case the validity criteria is not met, and a void string if everything is as it should be.<\/li>\n<\/ul>\n4. Creating a simple <textarea> element<\/h2>\n
4.1 Using Javascript<\/h3>\n
textarea.js<\/code> simply like below, without any tags or anything else. Just the code!<\/p>\n\r\nfunction createOurTextarea() {\r\n var ourElement = document.createElement(\"TEXTAREA\");\r\n var ourElementText = document.createTextNode(\"This is our TextArea!\");\r\n ourElement.appendChild(ourElementText);\r\n document.body.appendChild(ourElement);\r\n}\r\n<\/pre>\n\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Textarea<\/title>\r\n <script src=\"textarea.js\" type=\"text\/javascript\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<button onclick=\"createOurTextarea()\">Create TextArea<\/button>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
4.2 Using the <textarea> tag<\/h3>\n
\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Textarea<\/title>\r\n <script src=\"textarea.js\" type=\"text\/javascript\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<textarea name=\"comments\" cols=\"40\" rows=\"6\"><\/textarea> \r\n\r\n<p><input type=SUBMIT value=\"submit\"><\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
name<\/code>, cols<\/code> and rows<\/code>. Also, we used a submit button, which we do not strictly need for the textarea, but is usually there to submit the info. However, usually we only have one submit button for all the form.<\/p>\n5. Getting data from the textarea<\/h2>\n
\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Textarea<\/title>\r\n <script src=\"textarea.js\" type=\"text\/javascript\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\nData:\r\n<br>\r\n<textarea name=\"comments\" id=\"myTextarea\" cols=\"40\" rows=\"6\">Suppose we have this text!<\/textarea>\r\n\r\n<br>\r\n<button type=\"button\" onclick=\"getAndDisplay()\">Get Textarea Data<\/button>\r\n\r\n<br>\r\nDisplay Data:\r\n<br>\r\n<p id=\"display\"><\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
id<\/code> attribute with the value myTextarea<\/code>. For ease of use, our textarea is not empty. <\/p>\ngetAndDisplay()<\/code>, which we will explain later on. Then we have placed a paragraph with an id<\/code> of display<\/code>, both of which will be used in the function.<\/p>\n\r\nfunction getAndDisplay() {\r\n var x = document.getElementById(\"myTextarea\").value;\r\n document.getElementById(\"display\").innerHTML = x;\r\n}\r\n<\/pre>\ndisplay<\/code>. Easy, right?<\/p>\n6. Download the source code <\/h2>\n
You can download the full source code of this example here: Textarea<\/a><\/a><\/strong><\/div>\n","protected":false},"excerpt":{"rendered":"