niche Posted July 8, 2011 Share Posted July 8, 2011 I want to write a function that will count the number of characters in <textarea> and limit the <textarea> to 250 characters. My objectives are to keep the html as simple as possible and have the function handle the event and logic. I need to know how to think of input/output of the function. If I was coding this in PHP I would think of what I needed to do in terms of arrays, but don't know how to get access to the info from the event and the form except that part of the answer might have to do with the dom form object.Here's my work so far. The alert proves to me that I have access to the function, but I don't know what to do after that. How do I get the values into variables I can use? <!doctype html><html> <head> <title> Counter </title> </head> <body><form id="ta"> <textarea name="ta" rows="6" style="width:340px;"> </textarea> <br> <input type="text" name="countDisplay" size="3" maxlength="3" value="250"> Characters Remaining</form><script type="text/javascript"> var maxChar = 251;var currentNum = 0;var calcCharacters = document.getElementById('ta');calcCharacters.onkeydown = calcCharacters2;function calcCharacters2 () {alert( "I'm gonna count those chars in ta!" + maxChar ); //calculation of the number of characters in <textarea>;} </script> </body> </html> Link to comment Share on other sites More sharing options...
justsomeguy Posted July 8, 2011 Share Posted July 8, 2011 Consider this instead:<textarea name="ta" rows="6" style="width:340px;" onkeyup="calcCharacters2(this)"> </textarea>You just learned about what this is for, so in that context it will be set to the textarea element. That way you can send the textarea to the function and the function doesn't need to get the element itself, so you can put that onkeyup event on any textarea and point it to the same function and it will still work. You also don't need to use any global variables. function calcCharacters2 (el) { var max = 251; var current = el.value.length; if (current > max) { alert(current); }} Link to comment Share on other sites More sharing options...
niche Posted July 9, 2011 Author Share Posted July 9, 2011 Very cool. A very efficient use of code.Now, how should I think of the input/out for the character countdown in the input value? I want to assign <input> an id and access the DOM input text like I would an array in php, but I don't know how to do that (assuming that's an acceptable approach). Link to comment Share on other sites More sharing options...
thescientist Posted July 9, 2011 Share Posted July 9, 2011 Very cool. A very efficient use of code.Now, how should I think of the input/out for the character countdown in the input value? I want to assign <input> an id and access the DOM input text like I would an array in php, but I don't know how to do that (assuming that's an acceptable approach).I'm not sure what the array part of it really has to do with anything, even in PHP. I've written simple PHP truncation scripts for PHP that append ... when the string is too long and they did not involve arrays.As for this particular problem, you now know how to get the input, but as for the output, you have to be more specific as to what you are trying to accomplish. At this point anything is possible, but what do you want to do once you get the input and check it's length? Return it truncated? Tell the user that their input is too long? is it part of a form validation script? Please specify. Note that JSG's function is checking every keyup stroke. you may prefer to let the user type completely everything and then once the user leaves the elements focus alert them of the length. Another common way to implement this using JSG's keyup approach is to have a span below the input that you can use to provide feedback to the user to let them know how many characters they've used and then how many they've gone over if they go over the 250 mark. Link to comment Share on other sites More sharing options...
niche Posted July 9, 2011 Author Share Posted July 9, 2011 I need the value of <input> to display the characters remaining as the user types them. Then, I need to submit the user's input, but I haven't added the submit button yet. Link to comment Share on other sites More sharing options...
thescientist Posted July 10, 2011 Share Posted July 10, 2011 I need the value of <input> to display the characters remaining as the user types them. Then, I need to submit the user's input, but I haven't added the submit button yet.good deal. seems you have enough to do what you need then, right? Link to comment Share on other sites More sharing options...
niche Posted July 10, 2011 Author Share Posted July 10, 2011 Almost. I added a send parameter for the function. the var el2 has the right value,but it's not being displayed in the input box. what am I missing? here's my code so far: <!doctype html><html> <head> <title> Counter </title> </head> <body><form> <textarea name="ta" rows="6" style="width:340px;" onkeyup="calcCharacters2(this,document.getElementById('ta2'))" > </textarea> <br> <input id="ta" type="text" name="countDisplay" size="3" maxlength="3" value="250"> Characters Remaining</form><script type="text/javascript"> function calcCharacters2(el,el2) { var max = 250; var current = el.value.length; var wip = el2.value.length; if (current < max) { el2 = max - current; }} </script> </body> </html> Link to comment Share on other sites More sharing options...
niche Posted July 10, 2011 Author Share Posted July 10, 2011 I worked pretty hard on this and got it to work, but does the id violate justsomeguy's original intent?Script: <!doctype html><html> <head> <title> Counter </title></head> <body><form><textarea id="ta" name="ta" rows="6" style="width:340px;" onkeyup="calcCharacters2(this)" > </textarea><br><input id="ta2" type="text" name="countDisplay" size="3" maxlength="3" value="250"> Characters Remaining</form><script type="text/javascript">function calcCharacters2(el) {var max = 250;var current = el.value.length;if (current < max){document.getElementById('ta2').value = max - current;}}</script></body> </html> Link to comment Share on other sites More sharing options...
justsomeguy Posted July 11, 2011 Share Posted July 11, 2011 It changes it to only work for one field, or at least use the same counter for all fields. I guess the suffix is arbitrary, but you could use this as an ID:<input id="ta_count"And then get the ID to update in the function: function calcCharacters2(el) { var max = 250; var current = el.value.length; var count_el = document.getElementById(el.id + "_count"); That is looking for an element with the same ID as the textarea with the _count suffix after it. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.