Member Avatar for thebluestar 
<html>
<head>
		<script type="text/javascript">
				function check()
				{
					var val = document.myForm.content.value;
					if (val.length <= 10)
					    {
					       document.getElementById('numC').value = val.length;
					       //out.value = val.length;
					       
					    }
					 else
						document.write("Please enter the text in  range of 10 characters!");
					return false;	
				} 
		</script>
</head>
<body> 
       <form name="myForm">
       Type something here:
       <input type"textbox" value="" name="content"  onchange ="check()">
       <br/><br/>
       Lenght of string you enter:<input type="text" id="numC">
       </form>
</body>
</html>

Here is my code with the requirement: when I type text into the first input cell, the number of characters will be appear in the next cell, or if the number of character is greater than 10, the inform will be appear.
But I don't know how the inform will appear immediately if the tenth character is typed!
Please help me!
Thank you!

  • 3 Contributors
  • 2 Replies
  • 133 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

In 's snippet the intent is a live character count and an immediate warning once the 10th character is entered. Two practical corrections: do not use document.write on an already-loaded page, and prefer the input event instead of onchange (which fires on blur) or keypress (which can miss pasted text and IME activity). flagged the event issue and 's suggestion of a countdown (remaining characters) is a good UX direction.

Minimal, accessible pattern:

<input id="content" type="text" maxlength="10" aria-describedby="counter notice" />
<span id="counter">0/10</span>
<span id="notice" role="status" aria-live="polite"></span>

<script>
const MAX = 10;
const input = document.getElementById('content');
const counter = document.getElementById('counter');
const notice = document.getElementById('notice');

input.addEventListener('input', () => {
  const len = input.value.length;
  counter.textContent = len + '/' + MAX;
  notice.textContent = (len >= MAX) ? 'Limit reached' : '';
});
</script>

Notes and troubleshooting: use the maxlength attribute to stop extra characters at the browser level; if enforcement must be in JS, slice the value to MAX inside the input handler. For users who type with IME, avoid truncating mid-composition—track compositionstart/compositionend if needed. For forms, prevent submission with event.preventDefault() on submit handlers rather than using return false. Use role="status" or aria-live="polite" so assistive tech hears the limit message.

References: MDN on the input event, maxlength attribute, and ARIA live regions.

Recommended Answers

All 2 Replies

Member Avatar for Graphix

>> Line 13 - You forgot to add the {} at the else. You should always use an if...else the following:

if (...condition...) {

} else {

}

>> Line 14 - Never use a document.write() in a function you call when the page is already loaded. Use a custom message box or use alert("Message"); >> Line 22 - You should use the event onkeypress="check()" instead of onchange="check()" ~G

Edited by Graphix because: n/a
Member Avatar for almostbob

I always prefer, countdown code, similar coding, but, characters remaining

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.