js form表单input框限制20个字符,10个汉字代码实例


Posted in Javascript onApril 12, 2019

直接粘贴到html文件便可看到效果

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
   // 这是第一种最寻常的方法
   //定义一个函数
   function checkField(value, byteLength, attribute) {
    // value是input框的值,byteLength是需求限制的字符,attribute是input的id名
    var newvalue = value.replace(/[^\x00-\xff]/g, "**");
    var length = newvalue.length;
    //当填写的字节数小于设置的字节数
    if (length * 1 <= byteLength * 1) {
     return;
    }
    var limitDate = newvalue.substr(0, byteLength);
    var count = 0;
    var limitvalue = "";
    for (var i = 0; i < limitDate.length; i++) {
     var flat = limitDate.substr(i, 1);
     if (flat == "*") {
      count++;
     }
    }
    var size = 0;
    var istar = newvalue.substr(byteLength * 1 - 1, 1); //校验点是否为“×”
    //if 基点是×; 判断在基点内有×为偶数还是奇数
    if (count % 2 == 0) {
     //当为偶数时
     size = count / 2 + (byteLength * 1 - count);
     limitvalue = value.substr(0, size);
    } else {
     //当为奇数时
     size = (count - 1) / 2 + (byteLength * 1 - count);
     limitvalue = value.substr(0, size);
    }
    alert(
     "最大输入" +
      byteLength +
      "个字节(相当于" +
      byteLength / 2 +
      "个汉字)!"
    );
    document.getElementById(attribute).value = limitvalue;
    return;
   }
  </script>
 </head>
 <body>
  <div class="wrap">
   <form>
    <table class="list-style">
     <tr>
      <td style="width:15%;text-align:right;">职业:</td>
      <td>
       <input id="profession" type="text" "checkField(this.value,20,'profession')" class="textBox length-middle" name="profession"/>
       <input id="interest" type="text" "checkField(this.value,100,'interest')" class="textBox length-middle" name="interest"/>
       <input id="address" "checkField(this.value,40,'address')" type="text" class="textBox length-middle" name="address" />
      </td>
     </tr>
    </table>

    <div style="margin:20px 0 0 300px">
     <button
      type="reset"
      style="width:60px;height:30px;margin-right:40px"
      "refresh()"
     >
      重置
     </button>
     <button
      type="submit"
      style="width:60px;height:30px"
      "return checkNull()"
     >
      提交
     </button>
    </div>
   </form>
  </div>
 </body>
</html>

以上所述是小编给大家介绍的js form表单input框限制20个字符,10个汉字详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
el-table树形表格表单验证(列表生成序号)
May 31 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
详解js创建对象的几种方法及继承
Apr 12 #Javascript
详解JQuery基础动画操作
Apr 12 #jQuery
React中阻止事件冒泡的问题详析
Apr 12 #Javascript
TypeScript中的方法重载详解
Apr 12 #Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 #Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 #Javascript
详解Bootstrap 学习(一)入门
Apr 12 #Javascript
You might like
PHP mkdir()定义和用法
2009/01/14 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
浅析js封装和作用域
2013/07/09 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
python中urllib模块用法实例详解
2014/11/19 Python
python连接MySQL数据库实例分析
2015/05/12 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
LINUX下线程,GDI类的解释
2016/12/14 面试题
医院学雷锋活动策划方案
2014/02/15 职场文书
行政人事岗位职责
2014/03/17 职场文书
亲属关系公证书
2014/04/08 职场文书
法定代表人资格证明书
2014/09/11 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
植树节新闻稿
2015/07/17 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
Django 实现jwt认证的示例
2021/04/30 Python
Javascript之datagrid查询详解
2021/09/15 Javascript