Home > Web Front-end > JS Tutorial > How to implement jquery to limit the number of words in textarea input box

How to implement jquery to limit the number of words in textarea input box

PHPz
Release: 2018-09-29 16:49:39
forward
926 people have browsed it

This article mainly introduces the method of using jquery to limit the number of words in the textarea input box. This function is realized by reading the number of words in the textarea input box in real time through the keyup event. It is of great practical value. Friends who need it can refer to it

The example in this article describes the method of using jquery to limit the number of words in the textarea input box. Share it with everyone for your reference. The specific analysis is as follows:

On the Internet, the attribute disabled is used to achieve this. This is not good, and I didn’t modify it even if I wanted to. Of course, this isn't perfect either.

<html>
<head>
<title> jquery完美实现textarea输入框限制字数</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
 $(function(){
  $("#weibo").keyup(function(){
   var len = $(this).val().length;
   if(len > 139){
    $(this).val($(this).val().substring(0,140));
   }
   var num = 140 - len;
   $("#word").text(num);
  });
 });
</script>
<style type="text/css">
h6{color:blue;}
textarea{resize:none;}
#word{color:red;}
</style>
</head>
<body>
<h6>说点什么吧,你可以输入<span>140</span>个字,现在剩余<span id="word">140</span>个</h6>
<textarea name="con" id="weibo" cols="45" rows="6"></textarea>
</body>
</html>
Copy after login

I hope this article will be helpful to everyone’s jQuery programming. For more related tutorials, please visit jQuery Video Tutorial!

source:jb51.net
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