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 XML实现两级级联下拉列表
Nov 10 Javascript
一个选择最快的服务器转向代码
Apr 27 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 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简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
JavaScript实现分页效果
2017/03/28 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
Python获取系统默认字符编码的方法
2015/06/04 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
酒店执行总经理岗位职责
2013/12/15 职场文书
文明风采获奖感言
2014/02/18 职场文书
幼儿发展评估方案
2014/06/11 职场文书
跑出一片天观后感
2015/06/08 职场文书
公司老总年会致辞
2015/07/30 职场文书
500字作文之周记
2019/12/13 职场文书
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏