设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 605|回复: 0

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

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2015-2-2 11:29:04 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

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

代码如下:
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="UTF-8" />
  5. <title>jquery text文本框限制字数或文本框提示字数 超出不允许提交</title>
  6. <style type="text/css">
  7. .disabled{background:#d4d0c8;}
  8. </style>
  9. </head>
  10. <body>
  11. <div class="commentbox clear">
  12. <input id="wordtext" style="width:300px;" /><input type="button" value="提交" class="text" id="submit" />
  13. <div id="wordage">我是提示的位置</div>
  14. </div>
  15. <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
  16. <script>
  17. $(document).ready(function(){
  18. var limitNum = 20,pattern = '还可以输入' + limitNum + '字',wordage=$('#wordage'),wordtext=$('#wordtext'),submit=$('#submit');
  19. wordage.html(pattern);
  20. wordtext.keyup(
  21. function(){
  22. var remain = $(this).val().length;
  23. if(remain > limitNum){
  24. var result = limitNum - remain;
  25. pattern = '已超出'+result+'字';
  26. submit.attr('disabled','disabled').addClass('disabled');
  27. }else{
  28. var result = limitNum - remain;
  29. pattern = '还可以输入' + result + '字';
  30. submit.attr('disabled',false).removeClass('disabled');
  31. }
  32. wordage.html(pattern);
  33. }
  34. );
  35. });       
  36. </script>       
  37. </body>
  38. </html>
复制代码


效果截图:

QQ图片20150202113100.png
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-3 23:30

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表