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脚本函数库 方便开发
Oct 13 Javascript
一起来写段JS drag拖动代码
Dec 09 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
javascript判断非数字的简单例子
Jul 18 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
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
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
Ext面向对象开发实践(续)
2008/11/18 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
Python运用于数据分析的简单教程
2015/03/27 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
老海军美国官网:Old Navy
2016/09/05 全球购物
error和exception有什么区别
2012/10/02 面试题
P/Invoke是什么
2015/07/31 面试题
面试自我介绍演讲稿
2014/04/29 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
领导干部考核评语
2015/01/04 职场文书
开学随笔
2015/08/15 职场文书