jquery text文本框限制字数或文本框提示字数超出不允许提交

admin · 发表于 2015-2-2 11:29:04

您需要登录才可以下载或查看，没有账号？立即注册

x

jquery text文本框限制字数或文本框提示字数超出不允许提交

代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>jquery text文本框限制字数或文本框提示字数超出不允许提交</title>
<style type="text/css">
.disabled{background:#d4d0c8;}
</style>
</head>
<body>
<div class="commentbox clear">
<input id="wordtext" style="width:300px;" /><input type="button" value="提交" class="text" id="submit" />
<div id="wordage">我是提示的位置</div>
</div>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
var limitNum = 20,pattern = '还可以输入' + limitNum + '字',wordage=$('#wordage'),wordtext=$('#wordtext'),submit=$('#submit');
wordage.html(pattern);
wordtext.keyup(
function(){
var remain = $(this).val().length;
if(remain > limitNum){
var result = limitNum - remain;
pattern = '已超出'+result+'字';
submit.attr('disabled','disabled').addClass('disabled');
}else{
var result = limitNum - remain;
pattern = '还可以输入' + result + '字';
submit.attr('disabled',false).removeClass('disabled');
}
wordage.html(pattern);
}
);
});
</script>
</body>
</html>

复制代码

效果截图：

		自动登录	找回密码
密码			立即注册

[jQuery/Js/AJAX] jquery text文本框限制字数或文本框提示字数超出不允许提交