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 相关文章推荐
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
Vue.js中的图片引用路径的方式
Jul 28 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
ES6 十大特性简介
Dec 09 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/10/08 PHP
php页面防重复提交方法总结
2013/11/25 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
vscode 远程调试python的方法
2017/12/01 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
Python如何给函数库增加日志功能
2020/08/04 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
总经理司机职责
2014/02/02 职场文书
法人身份证明书
2014/10/08 职场文书
万里长城导游词
2015/01/30 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python
浅谈MySQL中的六种日志
2022/03/23 MySQL