Home > Web Front-end > JS Tutorial > How to dynamically prompt the number of words in the input box with JavaScript_javascript skills

How to dynamically prompt the number of words in the input box with JavaScript_javascript skills

WBOY
Release: 2016-05-16 15:48:50
Original
1427 people have browsed it

The example in this article describes the method of dynamically prompting the input box to enter the number of words in JavaScript. Share it with everyone for your reference. The details are as follows:

There is a function like a small note in QQ space. As you enter many words in the text box, it will dynamically prompt you "how many words have been entered" and "how many more words can be entered". I think it is quite good. , so I try to do it myself, haha.

At first, I think many people’s first impression was to do it through onkeydown or onkeyup of js. Then they found that focus setInterval() blur could also be used to achieve the effect we needed, so I quickly used this method to write it roughly by myself. All of a sudden, the desired effect was achieved.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>IT技术网-JavaScript动态提示输入框输入字数</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function $(obj){
return document.getElementById(obj);
}
function sp(){
var tex = $('te').value;
var nun =tex.length;
var spa = $('span');
spa.innerHTML = nun;
}
</script>
</head>
<body>
你已经输入了<span id='span'>0</span>字
<input value="" id="te" type="text" onfocus="ss=setInterval(sp,600)" onblur="clearInterval(ss)"/>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template