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 相关文章推荐
jquery 日期分离成年月日的代码
May 14 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
js实现简易聊天对话框
Aug 17 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
vue实现PC端分辨率适配操作
Aug 03 Javascript
7个你应该知道的JS原生错误类型
Apr 29 Javascript
利用 JavaScript 构建命令行应用
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
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
php简单生成随机数的方法
2015/07/30 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
如何在PHP中生成随机数
2020/06/04 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
Python语言进阶知识点总结
2019/05/28 Python
python文件选择对话框的操作方法
2019/06/27 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
求职简历自荐信
2013/10/20 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
车辆转让协议书
2014/09/24 职场文书
社区党务工作总结2015
2015/05/19 职场文书
大学班干部竞选稿
2015/11/20 职场文书
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python