Textarea输入字数限制实例(兼容iOS&安卓)


Posted in Javascript onJuly 06, 2017

最近在做一个微信公众号的页面,其中有对textarea做输入字数限制,而且需要兼容iOS和安卓手机,

下面直接贴代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>textarea输入字数限制(兼容ios和安卓)</title>
</head>

<body>
  <!-- 最多输入10个字 -->
  <textarea placeholder="请输入家庭地址(必填)" rows="2"></textarea>
  <textarea placeholder="请输入家庭地址(必填)" rows="2"></textarea>
  <textarea placeholder="请输入家庭地址(必填)" rows="2"></textarea>
  <textarea placeholder="请输入家庭地址(必填)" rows="2"></textarea>
  <textarea placeholder="请输入家庭地址(必填)" rows="2"></textarea>
  <textarea placeholder="请输入家庭地址(必填)" rows="2"></textarea>
  <script>
  var textarea = document.getElementsByTagName('textarea');
  for (var i = 0; i < textarea.length; i++) {
    textarea[i].oninput = function() {//注意,这里要用oninput,不要用onkeyup,否则iOS系统不支持
      this.value = this.value.substring(0, 10);
    }
  }
  </script>
</body>

</html>

遇到的坑:刚开始用onkeyup,发现iOS系统不支持,改用oninput,测试OK。

以上这篇Textarea输入字数限制实例(兼容iOS&安卓)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 图像动画的小demo
May 23 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
react系列从零开始_简单谈谈react
Jul 06 #Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 #Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 #Javascript
Js自定义多选框效果的实例代码
Jul 05 #Javascript
使用 jQuery 实现表单验证功能
Jul 05 #jQuery
详解angularJS自定义指令间的相互交互
Jul 05 #Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 #Javascript
You might like
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
script标签属性用type还是language
2015/01/21 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
Tensorflow简单验证码识别应用
2017/05/25 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
P/Invoke是什么
2015/07/31 面试题
初中数学教学反思
2014/01/16 职场文书
五好关工委申报材料
2014/05/31 职场文书
实验室的标语
2014/06/20 职场文书
学习党代会心得体会
2014/09/05 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
公民代理授权委托书
2014/09/24 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
MySQL如何使备份得数据保持一致
2022/05/02 MySQL
源码安装apache脚本部署过程详解
2022/09/23 Servers