Check field length as custom types

Question

Hey guys, I saw this ability over the Internet, and I was not sure how to look for it, a good example is sending a text message that it will say as you type:

132/160 - and the counter 132 will increase until you reach your limit.

My question is: is it possible to work with javascript separately, without jQuery library? However, if I need to use jQuery, I can perhaps point to a good tutorial or maybe simpler, or even some terms to find it, thanks.

Answer 1

<!--This is your input box. onkeyup, call checkLen(...) --> <input type="text" id="myText" maxlength="200" onkeyup="checkLen(this.value)"> <!--This is where the counter appears --> <div id="counterDisplay">0 of 200</div> <!--Javascript Code to count text length, and update the counter--> <script type="text/javascript"><!-- function checkLen(val){ document.getElementById('counterDisplay').innerHTML = val.length + ' of 200'; } //--></script> 

Answer 2

If you use the onkeyup event, I'm going to go to your web page and hold the key until I enter more than the allowable amount in the input field!

Use the oninput event, where it is supported (most major browsers and recent IE 9 previews) and onpropertychange for older Internet researchers:

 var myInput = document.getElementById("myInput"); if ("onpropertychange" in myInput && !("oninput" in myInput)) { myInput.onpropertychange = function () { if (event.propertyName == "value") inputChanged.call(this, event); } } else myInput.oninput = inputChanged; function inputChanged () { // Check the length here, eg this.value.length } 

I talked in detail about why onkeyup is a bad event for detecting input on my blog some time ago - http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript .

Answer 3

I think I got the exact solution to your problem. The countChar function accepts a text field object and a div object. The div object will display how many characters are left.

 function countChar(txtBox,messageDiv) { try { count = txtBox.value.length; if (count < 160) { charLeft = 160 - count; txt = charLeft + " characters left...keep typing!!"; messageDiv.innerHTML="<font color=green>" + txt + "</font>"; } else { messageDiv.innerHTML="<font color=red>Message is too long</font>"; } } catch ( e ) { } } <INPUT type="text" id="txtMessage" onkeyup="countChar(txtMessage,messagesuccess);" onkeydown="if(event.keyCode == 13){document.getElementById('btnSendTextMessage').click();}" > 

Answer 4

You need to connect the onkeyup text field event.

Then you can check / check the length of the text field value and (if you want to display the counter for the user), if necessary, update the counter display.

Answer 5

All you need is a key handler that checks the length of the string inside the text field. You can also specify the maxlength attribute for the text field.

As soon as you find that the string intersects 160 characters (or wateva limit), you can provide a warning window and then crop the string to the first 160 characters.

I am not going to provide code and a spoon. It can be easily found on the Internet.

Answer 6

Here is a simple solution.

Assuming you have html code like this

 <textarea onKeyPress='return count(this);'></textarea> <input type="text" id="info" value="0/160" /> 

Note: input / text field identifier is information.

You need the following javascript method

 function count(area){ var proceed = area.value.length < 160; document.getElementById('info').value = area.value.length+"/160"; return proceed; } 

Note: the identifier of the text field specified in the method, and the size is 160.

Answer 7

this code is for general use:

HTML:

 <input type="text" name="noteTitle" id="noteTitle" maxlength="100" onkeyup="checkLength(this,'titleLength')" /> <div id="titleLength">100</div> 

JS:

 //take field (fieldToCheckMax), and its counterID(titleLength) function checkLength(fieldToCheckMax,counterID){ //get the maxallowed for the input maxAllowed=fieldToCheckMax.getAttribute('maxlength'); //save the affected counter in a variable counterID=document.getElementById(counterID); //change the value based on the max allowed, to switch between green and red counterID.innerHTML=colorChanger(); //the color based checker, to decide is it red or green function colorChanger(){ if(fieldToCheckMax.value.length < maxAllowed) { counterID.style.color='green'; return maxAllowed-fieldToCheckMax.value.length;} else { counterID.style.color='red'; return maxAllowed-fieldToCheckMax.value.length; } } }