最近在做一个微信公众号的页面，其中有对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&安卓）的更多相关文章

  1. jQuery 写的textarea输入字数限制

    //先判断浏览器是不是万恶的IE        var bind_name = 'input';//默认事件        if (navigator.userAgent.indexOf(" ...

  2. 一次react滚动列表的实践---兼容ios安卓

    一.背景 近期项目改版,对原有的h5页面进行了重新设计,数据呈现变成了瀑布流.希望新版兼容ios和安卓两端的情况下,无限制的刷新加载数据.大致效果如下: 整个页面分4部分: 顶部导航 步数状态卡片 用 ...

  3. JS控制文本框textarea输入字数限制的方法

    <html> <head runat="server"> <title></title> <script type=" ...

  4. jquery实现限制textarea输入字数

    ie中可用onpropertychange监听改变事件 火狐和谷歌可用oninput监听改变事件 综合: //使系统中class='text-length'的输入框只能输入200字符(主要用于text ...

  5. JS控制文本框textarea输入字数限制

    <html> <head> <title>JS限制Textarea文本域字符个数</title> <meta http-equiv="C ...

  6. H5和PC实现点击复制当前文字的功能，兼容ios,安卓

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 手机端两端对齐，兼容ios,安卓

    .div-title p label{ text-align: justify; width: 18%; display: inline-block; text-align-last: justify ...

  8. 监听文本框输入开发仿新浪微博限制输入字数的textarea插件

    监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...

  9. 实现textarea限制输入字数（包含中文只能输入10个，全ASCII码能够输入20个）

    document.getElementById("<%=textBox1.ClientID %>").value 实现textarea限制输入字数(包含中文只能输入10 ...

随机推荐

  1. Linux 学习错误点整理之网络配置

    本人是一名实习生,最近在学习Linux,在实操的过程中还是遇到了一些问题,所以想记录下来,供自己以后复习,也希望能给跟我一样的菜鸟的人带来一点点帮助. 我用的是VMware Workstation P ...

  2. coursera 视频总是缓冲或者无法观看，有什么方法解决？

    win7电脑,三个步骤: (1)修改hosts文件,地址如下: C:\Windows\System32\drivers\etc,然后以文本格式打开hosts. (2)将如下内容复制到文件末尾 52.8 ...

  3. (转)python的ConfigParser模块

    原文:https://blog.csdn.net/miner_k/article/details/77857292 如何使用Python3读写INI配置文件-------https://blog.cs ...

  4. 理解web service 和 SOA

    什么是SOA? SOA的全称为Service Oriented Architecture,即面向服务架构.这是一种架构理念.它的提出是在企业计算领域将耦合的系统划分为松耦合的无状态的服务.服务发布出来 ...

  5. C# 多线程之List的线程安全问题

    网上关于List的线程安全问题将的很少,所以自己实验了一把,发现确实是线程不安全的.所以当你在进行多线程编程中使用了共享的List集合,必须对其进行线程安全处理. List的Add方法是线程不安全的, ...

  6. Python+selenium+webdriver 安装与环境配置

    1.python安装:访问python.org/download,下载最新版本,安装过程与其他windows软件类似.记得下载后设置path环境变量,然后Windows命令行就可以调用: 2.Sele ...

  7. 阿里云安装配置Ghost

    阿里云手动重装系统N次了,折腾不止.  系统环境 CentOS 6.3 X64 , 两块硬盘 系统 +数据盘 #重新挂载硬盘 [root@AY14040623435015772eZ ~]# fdisk ...

  8. 第一章-Javac编译器介绍

    1.Javac概述 编译器可以将编程语言的代码转换为其他形式,如Javac,将Java语言转换为虚拟机能够识别的.class文件形式.而这种将java源代码(以.java做为文件存储格式)转换为cla ...

  9. eclipse maven jdk全局设置

    <profile> <id>jdk-1.8</id> <activation> <activeByDefault>true</acti ...

  10. JavaScript -- TextArea

    -----054-TextArea.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=&quo ...