JavaScript Forum

**miki86** · 10-20-2010, 11:26 AM

Hi,
Im new to js and i've been reading js reference on w3schools but i have a problem with this one.

PHP Code:


			
var msg_length = 850;

var current_length = 0;

function new_msg_length() {

    current_length = document.getElementById("message").textLength;

    document.getElementById('msg_count').innerHTML = current_length+"/"+msg_length;

    

    // DEBUG

    alert(current_length);

}

My textarea has been set to run this function on keypress.
When textarea is blank and i press one key it still reads it like no key was pressed and it's allways late for one button.

And what if someone paste the text

Is onkeypress good for that or should i use onchange?

Thanks

**chrishirst** · 10-20-2010, 11:37 AM

What exactly is that you are trying to do?

**miki86** · 11:58 AM

I'm trying to count and limit textarea characters to 850.

Sorry i thought thread title explains it.

When texarea is changed im running a function to check the lengh and inform a user.

**chrishirst** · 10-20-2010, 12:06 PM

HTML Code:

<textarea onkeydown="CheckLen('charcount',this.id,900);" onkeyup="CheckLen('charcount',this.id,900);"
onblur="CheckLen('charcount',this.id,900);" onfocus="CheckLen('charcount',this.id,900);"
 name="details" id="details" rows="20" wrap="virtual" cols="85" onmouseup="getSelText(this.id);" style="float:left;">
</textarea>

Code:

	function CheckLen(p_sShowCount, p_sInput, p_iLimit) {
	e = document.getElementById(p_sInput);
		if (e.value.length > p_iLimit) {
		 // if too long...trim it!
			e.value = e.value.substring(0, p_iLimit);
		// otherwise, update 'characters left' counter
		} else {
			document.getElementById(p_sShowCount).innerHTML = p_iLimit - e.value.length;
		}
	}

p_sShowCount is the name of the element to show the count.

**miki86** · 10-20-2010, 12:20 PM

Thanks for this example.

Im trying to understand why onkeypress is not working right when first thing i do is check the length and display it after

HTML Code:

<textarea name="message" id="message" cols="60" rows="10" onkeypress="new_msg_length()" onchange="new_msg_length()" onfocus="new_msg_length()" onblur="new_msg_length()"></textarea>

PHP Code:


			
var msg_length = 850;

var current_length = 0;

function new_msg_length() {

    current_length = document.getElementById("message").textLength;

    document.getElementById('msg_count').innerHTML = current_length+"/"+msg_length;

}

Is that a bug or js is working like that?

**chrishirst** · 10-20-2010, 12:25 PM

there is no property called textLength for a textarea

**miki86** · 10-20-2010, 12:33 PM

hmm...strange, this is from Opera's DOM inspector (dragonfly or something)

I tried editing the example you gave me and same thing happens, IE, Opera, Mozilla.

**chrishirst** · 10-20-2010, 12:44 PM

That maybe just how they display it, "value" is the DOM property for the text in the textarea.

**chrishirst** · 10-20-2010, 12:57 PM

http://www.modtalk.co.uk/_site/code/...-check-length/

Works cross browser (as it was developed to do so)

**miki86** · 10-20-2010, 01:00 PM

Ok it doesn't matter it worked with textLength same as with value.length...
The problem is still present, onkeypress is late one command after focusing on textarea.

That one is working right it should be but not this one, try it:

HTML Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
var msg_length = 850;
var current_length = 0;
function new_msg_length() {
	field = document.getElementById("message");
	current_length = field.value.length;
	document.getElementById('msg_count').innerHTML = current_length+"/"+msg_length;
}
//-->
</script>
</head>

<body>
<form name="example" action="#" method="post">
	<p id="msg_count">0/850</p>
	<textarea name="message" id="message" cols="60" rows="10" onkeypress="new_msg_length()" onchange="new_msg_length()" onfocus="new_msg_length()" onblur="new_msg_length()"></textarea>
</form>
</body>
</html>

**miki86** · 01:15 PM

I changed onkeypress with onkeydown and onkeyup and it's working now ok.

Maybe the function was run while i was pressing a button.

Thanks chris appreciate your help.

EDIT: I increased my keyboard button delay just for testing purposes, onkeydown also doesn't work right away, html is changed on onkeyup only.

**elf2002** · 10-20-2010, 01:20 PM

onkeyup="if(this.value.length....."?

**chrishirst** · 10-20-2010, 01:23 PM

because you are using the onKeyPress event, use onkeyup/onkeydown events instead instead.

The onKeyPress has some problems with all keystrokes not always being captured.

**miki86** · 10-20-2010, 04:59 PM

I didn't know that, i'll keep in mind that for the future.

Thanks for the info and all the help.

**miki86** · 10-20-2010, 05:24 PM

Sorry if im breaking rules for double posting.

Code:

current_length = document.getElementById("message").textLength;

Works on opera, mozilla, chrome... but not on IE.

**chrishirst** · 10-20-2010, 06:07 PM

Just been rooting through various DOM specs and properties.

The textLength property is detailed in the Mozilla documentation for the HTML.TextAreElement as a HTML5 property implementation.
So it is only going to work only in the browsers that support the HTML5 DOM or partially at least.

**chrishirst** · 10-20-2010, 06:16 PM

http://www.w3.org/TR/html5/the-butto...rea-textlength