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 相关文章推荐
javascript 全等号运算符使用说明
May 31 Javascript
javascript客户端解决方案 缓存提供程序
Jul 14 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
原生js实现简单轮播图
Oct 26 Javascript
详解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
星际玩家的三大定律
2020/03/04 星际争霸
php 特殊字符处理函数
2008/09/05 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
js字符编码函数区别分析
2008/06/05 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
python修改操作系统时间的方法
2015/05/18 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
消防先进事迹材料
2014/02/10 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
新闻稿标题
2015/07/18 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
教你用eclipse连接mysql数据库
2021/04/22 MySQL