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 相关文章推荐
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
JS跨域代码片段
Aug 30 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
简单实现js页面切换功能
Jan 10 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
PHP Token(令牌)设计
2008/03/15 PHP
js下函数般调用正则的方法附代码
2008/06/22 PHP
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
php实现购物车功能(下)
2016/01/05 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
JS的get和set使用示例
2014/02/20 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
财务管理专业自荐信范文
2013/12/24 职场文书
优秀员工表扬信
2014/01/17 职场文书
护理专业自荐信范文
2014/02/26 职场文书
仓库文员岗位职责
2014/04/06 职场文书
惊天动地观后感
2015/06/10 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers
Python借助with语句实现代码段只执行有限次
2022/03/23 Python