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 相关文章推荐
浅谈JS中json数据的处理
Jun 30 Javascript
Vue.js表单控件实践
Oct 27 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
JS访问对象两种方式区别解析
Aug 29 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
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
中英文字符串翻转函数
2008/12/09 PHP
php 动态多文件上传
2009/01/18 PHP
PHP技术开发技巧分享
2010/03/23 PHP
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
编写Js代码要注意的几条规则
2010/09/10 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
python实现文本界面网络聊天室
2018/12/12 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
高校毕业生登记表自我鉴定
2013/11/03 职场文书
网络信息管理员岗位职责
2014/01/05 职场文书
研讨会主持词
2014/04/02 职场文书
行政专员求职信范文
2014/05/03 职场文书
应用外语系自荐信
2014/06/26 职场文书
给老婆道歉的话
2015/01/20 职场文书
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers