<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script src="https://code.jquery.com/jquery-3.2.1.js" ></script>
</head>
<body>
<div class="container">
<input type="text" name="" id="textNum" value="abc"/>
<span id="wordNumShow"></span>
</div>
<script type="text/javascript">
$.fn.extend({
//jQuery插件开发分为两种：1类级别 、2 对象级别；
//类级别开发扩展其方法时使用$.extend方法，即jQuery.extend(object);
//对象级别则可以理解为基于对象的拓展,开发扩展其方法时使用$.fn.extend方法，即jQuery.fn.extend(object);
wordNum:function (maxLength,wordWrapper) {
var self = this;
$(self).attr('maxLength',maxLength);
//attr() 方法设置或返回被选元素的属性值
showWordNum();
$(this).on('input propertychange',showWordNum);
//on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
function showWordNum(){
curLength = $(self).val().length;
var leaveNum = maxLength - curLength;
wordWrapper.text(leaveNum + '/' + maxLength);
}
}
})
$(function(){
$('#textNum').wordNum(10,$('#wordNumShow'));
})
</script>
<script type="text/javascript">
function words_deal(){
var curLength = $('#textArea').val().length;
if(curLength>5){
var num = $('#textArea').val().substr(0,5);
//0是开始的位置,而5代表长度
$('#textArea').val(num);
}else{
$('#textCount').text(5-$('#textArea').val().length);
}
}
</script>
<br/>
<div>
<textarea id="textArea" cols="45" rows="5" οnkeyup="words_deal()"></textarea><br/>
剩余<span id="textCount">5</span>个字
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script src="https://code.jquery.com/jquery-3.2.1.js" ></script>
</head>
<body>
<div class="container">
<input type="text" name="" id="textNum" value="abc"/>
<span id="wordNumShow"></span>
</div>
<script type="text/javascript">
$.fn.extend({
//jQuery插件开发分为两种：1类级别 、2 对象级别；
//类级别开发扩展其方法时使用$.extend方法，即jQuery.extend(object);
//对象级别则可以理解为基于对象的拓展,开发扩展其方法时使用$.fn.extend方法，即jQuery.fn.extend(object);
wordNum:function (maxLength,wordWrapper) {
var self = this;
$(self).attr('maxLength',maxLength);
//attr() 方法设置或返回被选元素的属性值
showWordNum();
$(this).on('input propertychange',showWordNum);
//on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
function showWordNum(){
curLength = $(self).val().length;
var leaveNum = maxLength - curLength;
wordWrapper.text(leaveNum + '/' + maxLength);
}
}
})
$(function(){
$('#textNum').wordNum(10,$('#wordNumShow'));
})
</script>
<script type="text/javascript">
function words_deal(){
var curLength = $('#textArea').val().length;
if(curLength>5){
var num = $('#textArea').val().substr(0,5);
//0是开始的位置,而5代表长度
$('#textArea').val(num);
}else{
$('#textCount').text(5-$('#textArea').val().length);
}
}
</script>
<br/>
<div>
<textarea id="textArea" cols="45" rows="5" οnkeyup="words_deal()"></textarea><br/>
剩余<span id="textCount">5</span>个字
</div>
</body>
</html>
834
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
