Maison > Article > interface Web > Exemple détaillé d'implémentation de jquery pour limiter le nombre de mots d'entrée dans la zone de texte
Exemple détaillé d'implémentation de jquery pour limiter le nombre de mots d'entrée dans la zone de texte
- 小云云original
- 2017-12-29 10:41:431085parcourir
Comment jquery limite-t-il le nombre de mots saisis dans une zone de texte ? Cet article présente principalement en détail la méthode d'utilisation de jquery pour limiter le nombre de mots saisis dans la zone de texte. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.
Les amis dans le besoin peuvent se référer aux exemples que j'ai écrits. Bien sûr, s'il y a des erreurs, j'espère que tout le monde pourra les signaler à temps afin que nous puissions apprendre et progresser ensemble.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>textarea 限制字数</title>
<style>
.container{
position: relative;
width: 730px;
}
.container span{
position: absolute;
bottom: 20px;
right: 30px;
}
</style>
</head>
<body>
<p class="container">
<textarea name="content" id="content" cols="100" rows="10"></textarea>
<span>0/10</span>
</p>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function(){
/**
* textarea 限制输入字数
* @param string str 类名或ID
* @param number num 限制输入的字数
*/
function limitImport(str,num){
$(document).on('input propertychange',str,function(){
var self = $(this);
var content = self.val();
if (content.length > num){
self.val(content.substring(0,num));
}
self.siblings('span').text(self.val().length+'/'+num);
});
}
//用法示例
limitImport('#content',10);
})
</script>
</body>
</html>Recommandations associées :
4750256ae76b6b9d804861d8f69e79d3 de HTML Comment utiliser
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!