CuText is a non-standard textarea in JQuery. Automatic stretching of textarea using javascript and jQuery Limitation: design and resize

add to (20)

I'm trying to set a value in a textarea field using jquery with the following code:

$("textarea#ExampleMessage").attr("value", result.exampleMessage);

The problem is that after executing this code it doesn't change the text in the textbox?

However, when executing alert($("textarea#ExampleMessage").attr("value")) the new set value is returned?

Answers

I had the same question so I decided to try it in current browsers (we're a year and a half after this question) and this (.val) works

FF 3.6
Opera 11
Chrome 10

When I had JQuery v1.4.4 on the page, none of them worked. When I entered JQuery v1.7.1 into my page it finally worked. So in my case it was my version of JQuery that was causing the problem.

id ==> textareaid

======================

Var script1 = document.createElement("script"); script1.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"; document.body.appendChild(script1); var script2 = document.createElement("script"); script2.type = "text/javascript"; script2.innerHTML = "var $jq171 = $.noConflict();"; document.body.appendChild(script2); $jq171("#textareaid").val("xxx");

Just use textarea Id by type:

$("textarea#samplID").val()

To set the textarea value of the HTML encoded (to show as HTML) you should use .html(the_var) but as mentioned, if you try to set it again it may (and probably won't) work.

You can fix this by emptying textarea.empty with .empty() and then setting it again with .html(the_var)

jQuery(function($)( $(".load_html").click(function())( var my_var = $(this).data("my_html"); $("#dynamic_html").html(my_var); ) ); $("#clear_html").click(function())( $("#dynamic_html").empty(); )); Google HTML Yahoo HTML Clear HTML

textarea doesn't save values as

instead it stores the values in this format:

someString

So attr("value","someString") gets you this result:

someOLDString.

try $("#textareaid").val() or $("#textareaid").innerHTML Use $("#textareaid").innerHTML instead.

$("textarea#ExampleMessage").val() in jquery is just magic.

You should notice that the textarea tag uses inner html for display rather than a value attribute just like the input tag.

blah blah

You should use

$("textarea#ExampleMessage").html(result.exampleMessage)

$("textarea#ExampleMessage").text(result.exampleMessage)

depends on whether you want to display it as html tags or plain text.

There's a problem: I need to generate html code from the contents of a given div. Then I have to put this raw html code into a text box. When I use the $(textarea).val() function like this:

$(textarea).val("some html like bla bla");

$("#idTxtArGenHtml"). val($("idDivMain").html());

I had a problem with some special character (&") when they are between quotas. But when I use the function: $(textarea).html(), the text is fine.

Here is an example form:

Test your newsletter"

Send to :

Subject Enter the subject: *

Message Html code: *

javascript/jquery code that doesn't work to fill a textbox:

Function onGenHtml())( $("#idTxtArGenHtml").html($("#idDivMain").html()); )

Complete the solution:

Function onGenHtml())( $("#idTxtArGenHtml").html($("#idDivMain").html()); $("#idTxtArGenHtml").parent().replaceWith(""+$("#idTxtArGenHtml ").parent().html()+""); )

The trick is wrapping your text area with a span tag to help with the replaceWith function. I'm not sure if it's very clean, but it works great by adding the HTML source code to the text field.

Using $("textarea#ExampleMessage").html("whatever you want to put here"); May be in a good way because .val() may have problems when using data from the database.

For example:

The database field called description has the following value: asjkdfklasdjf sjklñadf . In this case, using .val() to assign a value to textarea can be a tedious task.

I think one important aspect is missing:

$("#some-text-area").val("test");

only works if there is an identifier selector (#)

It is possible for a class selector to use a custom value, for example:

$(".some-text-area").value = "test";!}

On android .val and .html does not work.

$("#id").text("some value")

did this job.

Textarea does not have a value attribute, its value occurs between tags, i.e.: my text , this is not like an input field(). That's why attr doesn't work :)

The text area doesn't matter. jQuery .html() works in this case

$("textarea#ExampleMessage").html(result.exampleMessage);

Have you tried the shaft?

$("textarea#ExampleMessage").val(result.exampleMessage);

I think this should work:

$("textarea#ExampleMessage").val(result.exampleMessage);

The accepted answer worked for me, but only after I realized that I had to execute my code after the page had finished loading. In this situation the inline script didn't work, I think because #my_form wasn't loaded yet.

$(document).ready(function() ( $("#my_form textarea").val(""); ));

Just use this code and you will always have a value:

var t = $(this); var v = t.val() || t.html() || t.text();

So it will check val() and set its value. If val() receives an empty string, NULL, NaN os, it will check for html() and then for text()...

We can use the .val() or .text() methods to set the values. we need to put the value inside val() like val("hello").

$(document).ready(function () ( $("#submitbtn").click(function () ( var inputVal = $("#inputText").val(); $("#txtMessage").val( inputVal);

JQuery

jQuery makes ridiculously long JavaScript commands like getElementByHerpDerp shorter and cross-browser.

AngularJS

AngularJS allows you to create custom HTML tags/attributes that work well with dynamic web applications (since HTML was designed for static pages).

Edit:

Saying "I have a jQuery background, how can I think in AngularJS?" it's like saying "I have an HTML background, how can I think in JavaScript?" The fact that you're asking a question shows that you most likely don't understand the underlying purposes of these two resources. That's why I decided to answer the question by simply stating the fundamental difference rather than going into a list that says "AngularJS uses directives, whereas jQuery uses a CSS selector to create a jQuery object that does this, etc." , This question does not require a long answer.

jQuery is a way to make JavaScript programming easier in the browser. Shorter, cross-browser commands, etc.

AngularJS extends HTML code so you don't have to host everything you need to create an application. This makes HTML actually work for applications rather than what it is intended for, which is static, educational web pages. This is achieved using JavaScript, but at root it is an extension of HTML, not JavaScript.

value add (20)

I'm trying to set a value in a textarea field using jquery with the following code:

$("textarea#ExampleMessage").attr("value", result.exampleMessage);

The problem is that after executing this code it doesn't change the text in the textbox?

However, when executing alert($("textarea#ExampleMessage").attr("value")) the new set value is returned?

Answers

On android .val and .html does not work.

$("#id").text("some value")

did this job.

Textarea does not have a value attribute, its value occurs between tags, i.e.: my text , this is not like an input field(). That's why attr doesn't work :)

The text area doesn't matter. jQuery .html() works in this case

$("textarea#ExampleMessage").html(result.exampleMessage);

Just use textarea Id by type:

$("textarea#samplID").val()

Have you tried the shaft?

textarea doesn't save values as

instead it stores the values in this format:

someString

So attr("value","someString") gets you this result:

someOLDString.

try $("#textareaid").val() or $("#textareaid").innerHTML Use $("#textareaid").innerHTML instead.

To set the textarea value of the HTML encoded (to show as HTML) you should use .html(the_var) but as mentioned, if you try to set it again it may (and probably won't) work.

You can fix this by emptying textarea.empty with .empty() and then setting it again with .html(the_var)

I had the same problem and this solution didn't work, but it worked with using html

$("#your_textarea_id").html("some_value");

I think one important aspect is missing:

$("#some-text-area").val("test");

only works if there is an identifier selector (#)

It is possible for a class selector to use a custom value, for example:

$(".some-text-area").value = "test";!}

Using $("textarea#ExampleMessage").html("whatever you want to put here"); might be a good way because .val() might have problems when using data from the database.

For example:

The database field called description has the following value: asjkdfklasdjf sjklñadf . In this case, using .val() to assign a value to textarea can be a tedious task.

Oh come on boys! it only works with

$("#your_textarea_id").val("some_value");

You can even use the snippet below.

$("textarea#ExampleMessage").append(result.exampleMessage);

I had the same question so I decided to try it in current browsers (we're a year and a half after this question) and this (.val) works

$("textarea#ExampleMessage").val(result.exampleMessage);

FF 3.6
Opera 11
Chrome 10

$("textarea#ExampleMessage").val() in jquery is just magic.

You should notice that the textarea tag uses inner html for display rather than a value attribute just like the input tag.

blah blah

You should use

$("textarea#ExampleMessage").html(result.exampleMessage)

$("textarea#ExampleMessage").text(result.exampleMessage)

depends on whether you want to display it as html tags or plain text.

I tried using .val() .text() .html() and had some errors using jQuery to read or set the textarea value...i endup using inline js

$("#message").blur(function() ( if (this.value == "") ( this.value = msg_greeting; ) ));

Just use this code and you will always have a value:

var t = $(this); var v = t.val() || t.html() || t.text();

So it will check val() and set its value. If val() receives an empty string, NULL, NaN os, it will check for html() and then for text()...

I think this should work:

$("textarea#ExampleMessage").val(result.exampleMessage);

There's a problem: I need to generate html code from the contents of a given div. Then I have to put this raw html code into a text box. When I use the $(textarea).val() function like this:

$(textarea).val("some html like bla bla");

$("#idTxtArGenHtml"). val($("idDivMain").html());

I had a problem with some special character (&") when they are between quotas. But when I use the function: $(textarea).html(), the text is fine.

Here is an example form:

Test your newsletter"

Send to :

Subject Enter the subject: *

Message Html code: *

javascript/jquery code that doesn't work to fill a textbox:

Function onGenHtml())( $("#idTxtArGenHtml").html($("#idDivMain").html()); )

Complete the solution:

Function onGenHtml())( $("#idTxtArGenHtml").html($("#idDivMain").html()); $("#idTxtArGenHtml").parent().replaceWith(""+$("#idTxtArGenHtml ").parent().html()+""); )

The trick is wrapping your text area with a span tag to help with the replaceWith function. I'm not sure if it's very clean, but it works great by adding the HTML source code to the text field.

If($("#checkboxId").is(":checked"))( alert("Checked"); )

If($("#checkboxId").attr("checked")==true)( alert("Checked"); )

If (document.getElementById("checkboxID").checked)( alert("Checked"); )

Prepared by: Alexander Golovko Date of publication: 09/23/2010

Task

Change the design of the textarea, implement a stylish vertical scroll bar.

Requirements

ease of integration
cross-browser compatibility
maximum proximity to the work of a regular textarea
- based on regular textarea
- standard response to name, id, disabled attributes
- customizable scroll view, mouse scrolling
- optionally the ability to resize the textarea with the mouse in any browser (as in Safari and Chrome)
with javascript disabled, regular textareas remain

Implementation

To solve the problem we had to forcefully “make friends” with three plugins. These are autoResize (thanks James Padolsey!), jScrollPane and UI resizable.

Thus cuText 0.9 was born.

Example of possibilities. Tested in:

IE 6-8
Firefox 3
Opera 9.5-10
Safari 3
Chrome 6

What to download?

autoresize.jquery.js (3.77 Kb) - autoresize plugin
UI resizable (27.41 Kb) - can not be used if there is no need for the function of resizing the textarea with the mouse
jScrollPane.js (22.62 Kb) original has been modified.
jquery.mousewheel.min.js (2.6 Kb) to support mouse wheel scrolling.
cuText.js (1.98 Kb) the plugin itself.
cuText.css style sheet.

Quick start

Connecting libraries:

...and a style sheet:

This assumes that there is a textarea somewhere in the HTML code:

We initialize the cuText plugin, for example, like this:

jQuery(function())( jQuery("textarea").cuText(); ));

That's it.

And now in more detail

The cuText() function, which is responsible for initialization, can take the following parameters:

cuText() parameters Initialization examples

For all resizable fields with the cuText class:

jQuery(function())( jQuery(".cuText").cuText((resizable: true)); ));

Field with id="cuText" with the ability to resize, minimum sizes, no arrows in the scroll bar, bar width 12px:

jQuery(function())( jQuery("#cuText").cuText(( resizable: true, scrollbarWidth: 12, showArrows: true, minWidth: 200, minHeight: 100 )); ));

Limitation: design and resize

You can initialize the plugin with the resizable: true parameter only for those textareas for which a solid background image was not used (in the demo example, these are all fields except the sixth). After all, when resizing, the solid background will not stretch and the layout will look ugly. I consider this limitation not very significant, since the resize itself for ordinary textareas is implemented only in some browsers, i.e. is not a standard.

A little more about pluggable *.js

In addition to jquery itself, the demo example includes 5 more js files with a total weight of almost 60Kb. A reasonable question arises: is it possible to reduce this weight? Yes, you can. The jquery-ui-1.8.custom.min.js plugin is needed only if it is necessary for the user to be able to change the size of stylish textareas with the mouse. If this function is not needed, feel free to remove this plugin.

jScrollPane.js and jquery.mousewheel.min.js are responsible for stylish scrolling. It is clear that if it is already implemented in the project (and as a rule it is, that is, if stylish textareas are used, then the select, as a rule, is stylized), then these files are already included.

Thus minimum set additionally included files are autoresize.jquery.js and cutext.js with a total weight of 5.75Kb.

List of common questions How to set up appearance textarea?

The appearance of a stylish textarea is defined in cutext.css. The plugin automatically wraps textarea in . Basically, its styles are responsible for the appearance of the field:

CuTextWrap( width:400px; background:none; color:#000; padding:3px 3px 10px 3px; /* the bottom padding is larger - we reserve space for the resize corner */ border:1px solid #B2B2B2; -webkit-border-radius: 4px ; -moz-border-radius: 4px; border-radius: 4px; position: relative; /* necessary for positioning the borders that the user will drag */ .cuTextWrap textarea( width: 100%; height: 80px; / * initial height of textarea */ display: block: border:none; color:#000;

How to customize scrollbar styles?

Since the scrollbar is formed using the jScrollPane plugin, the configuration is done as described in the jScrollPane article. We make beautiful scrolling. All necessary styles are included in cutext.css.

And I already use jScrollPane in my layout. Will there be a conflict of styles?

No, it won't. Styles for textarea are protected because in cutext.css they are all declared with a parent (for example, .cuTextWrap .jScrollPaneContainer).

I already use jScrollPane in my layout. And the plugin description says “jScrollPane.js (22.62 Kb) the original has been modified.” How to resolve this situation?

Again, no big deal. The original has changed very little and can be used for normal scrolling.

The original jScrollPane.js has these lines:

Switch (e.keyCode) ( case 38: //up currentArrowDirection = -1; currentArrowInc = 0; whileArrowButtonDown(); currentArrowTimerArr = setInterval(whileArrowButtonDown, 100); return false; case 40: //down currentArrowDirection = 1; currentArrowInc = 0; whileArrowButtonDown(); currentArrowTimerArr = setInterval(whileArrowButtonDown, 100);

This code, among other things, seems to block clicks on the up and down arrows, i.e. return false prevents the cursor from being moved within the textarea. These arrows simply move the scroll. In the modified jScrollPane.js it simply says return true.

The jScrollPane, autoresize, and jQuery UI::resizable plugins offer a number of more subtle behavior settings. They weren't included in the cuText parameter list, but I want to use them! What should I do?

Yes, they really have a lot of parameters. Moving them all to cuText would make it unnecessarily complicated. If we need fine-tuning, open cutext.js, look for calls to the plugins we need and add the necessary parameters.

I need to use attributes in HTML to set the textarea id, name, disabled, tabindex, etc. Will this all work after using the plugin?

Yes, it will. The basis will be the same textarea that was originally placed in HTML, with all its attributes.

Is it possible to add stylish textareas dynamically?

Can. Only for a newly created textarea you need to immediately initialize the plugin. It might look, for example, like this (insertion by clicking on the id="btnCreate" element):

JQuery("#btnCreate").click(function() ( jQuery(this).after("textarea created on the fly using a script."); jQuery(this).next().cuText((resizable: true)) ; ));

Bugs/disadvantages of the plugin

A large number of scripts used with maximum functionality of the plugin (with resize). The way to fight is to paste the scripts into one file. For example, like this: download cutext-all.min.js (42.8 Kb).

I am attempting to set a value in a textarea field using jquery with the following code:

$("textarea#ExampleMessage").attr("value", result.exampleMessage);

The issue is, once this code executes, it is not altering the text in the textarea?

However when performing an alert($("textarea#ExampleMessage").attr("value")) the newly set value is returned?

Have you tried val?

Textarea has no value attribute, its value comes between tags, i.e: my text , it is not like the input field (). That’s why attr doesn’t work :)

$("textarea#ExampleMessage").val() in jquery just a magic.

You should notice that textarea tag using inner html to display and not in value attribute just like input tag.

blah blah

$("textarea#ExampleMessage").html(result.exampleMessage)

$("textarea#ExampleMessage").text(result.exampleMessage)

depend on if you want to display it as html tags or plain text.

I think this should work:

$("textarea#ExampleMessage").val(result.exampleMessage);

Oohh come on boys! it works just with

$("#your_textarea_id").val("some_value");

i had the same question so i decided to try it in the current browsers (we’re one and a half year later in time after this question), and this (.val) works

$("textarea#ExampleMessage").val(result.exampleMessage);

FF 3.6
Opera 11
Chrome 10

I had the same issue and this solution didn’t work but what worked was to use html

$("#your_textarea_id").html("some_value");

There the problem: I need to generate html code from the contain of a given div. Then, I have to put this raw html code in a textarea. When I use the function $(textarea).val() like this:

$(textarea).val(“some html like< input
type=’text’ value=” style=”background: url(‘http://www.w.com/bg.gif’) repeat-x center;” /> bla bla”);

$(‘#idTxtArGenHtml’).val(
$('idDivMain').html());

I had problem with some special character (& ‘ ”) when they are between quot. But when I use the function:
$(textarea).html() the text is ok.

There is an example form:

Test your newsletter"

Send to :

Subject Enter the subject: *

Message Html code: *

And javascript/jquery code that don’t work to fill the textarea is:

Function onGenHtml())( $("#idTxtArGenHtml").html($("#idDivMain").html()); )

Finaly the solution:

Function onGenHtml())( $("#idTxtArGenHtml").html($("#idDivMain").html()); $("#idTxtArGenHtml").parent().replaceWith(""+$("#idTxtArGenHtml ").parent().html()+""); )

The trick is wrap your textarea with a span tag to help with the replaceWith function.
I’m not sure if it’s very clean, but it’s work perfect too add raw html code in a textarea.

Text Area doesnot have value. jQuery .html() works in this case

$("textarea#ExampleMessage").html(result.exampleMessage);

textarea doesn't store values as

instead, it stores values in this format:

someString

So attr("value","someString") gets you this result:

someOLDString.

try $("#textareaid").val() or $("#textareaid").innerHTML instead.

I tried with .val() .text() .html() and had some bugs using jQuery to read or set value of a textarea… i endup using native js

$("#message").blur(function() ( if (this.value == "") ( this.value = msg_greeting; ) ));

We can either use .val() or .text() methods to set values. we need to put value inside val() like val(“hello”).

$(document).ready(function () ( $("#submitbtn").click(function () ( var inputVal = $("#inputText").val(); $("#txtMessage").val( inputVal);

To set textarea value of encoded HTML (to show as HTML) you should use .html(the_var) but as mentioned if you try and set it again it may (and probably) will not work.

You can fix this by emptying the textarea .empty() and then setting it again with .html(the_var)

JQuery(function($)( $(".load_html").click(function())( var my_var = $(this).data("my_html"); $("#dynamic_html").html(my_var); ) ); $("#clear_html").click(function())( $("#dynamic_html").empty(); )); Google HTML Yahoo HTML Clear HTML

On android .val and .html didn’t work. $(‘#id’).text(“some value”) did the job.

The accepted answer works for me, but only after I realized I had to execute my code after the page was finished loading. In this situation inline script didn’t work, I guess because #my_form wasn’t done loading yet.

$(document).ready(function() ( $("#my_form textarea").val(""); ));

You can even use the below snippet.

$("textarea#ExampleMessage").append(result.exampleMessage);

When I had JQuery v1.4.4 in the page, neither of these worked. When injecting JQuery v1.7.1 into my page, it worked finally. So in my case, it was my JQuery version that was causing the issue.

id ==> textareaid

======================

Just use textarea Id by its type like it:

$("textarea#samplID").val()

Just use this code and you will always have the value:

Var t = $(this);
var v = t.val() || t.html() || t.text();

So it will check val() and set its value. If val() gets an empty string, NULL, NaN o.s. it will check for html() and then for text()…

Using $("textarea#ExampleMessage").html("whatever you want to put here"); can be a good way, because .val() can have problems when you are using data from database.

A database field named as description has the following value asjkdfklasdjf sjklñadf . In this case using .val() to assign value to textarea can be a tedious job.

The method allows you to get and change the values of form elements. For input elements, this is the value of the value attribute; for select lists - the value of the selected element (in the case of multiple selection - an array of values); in the case of textarea , the .val() method will operate directly on the content of the textarea tag. The method has three use cases:

returns the value of the value attribute of the selected form element. If several elements are selected, the value will be taken from the first one. In the case of a form element, an array of all selected values is returned.

the value attribute will be assigned a value newVal, for all selected elements.

the value attribute will be set to the value returned by the user-defined function. The function is called separately for each of the selected elements. When called, the following parameters are passed to it: index— the position of the element in the set, newVal— the current value of the element’s value attribute.

Examples of use:

Comment: It is important to note that using the .val() method, you will only get the values of the value attribute for the first element of all the selected ones. If you need the values of all elements, then you should use constructs like .map() or .each() .

In action

If in one of the text fields in which you need to write down your favorite products, the value is different from “Chocolate”, the user will receive a note:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~ lt~/script~gt~ ~lt~style~gt~ input( width:240px; margin:3px; ) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt ~b~gt~Indicate your favorite products:~lt~/b~gt~~lt~br~gt~ ~lt~input type="text" value="Sausage" /~gt~~lt~br~gt~ ~lt~input type="text" value="Chocolate" /~gt~~lt~br~gt~ ~lt~input type="text" value="Beer" /~gt~~lt~br~gt~ ~lt~input type="text" value="Spaghetti" /~gt~ ~lt~div id="state"~gt~ ~lt~/div~gt~ ~lt~script~gt~ $("input:text").val(function(index, x){ if(x != "Шоколад") return "Шоколад лучше чем " + x; else return x; }); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~!}