最近在做一个微信公众号的页面，其中有对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. SpringBoot从入门到逆天（1）

    1.SpringBoot是什么? <1>为Sping开发提供一个更 快捷更广泛的入门体验. <2>开箱即用,不合适时特可以快速抛弃. <3>提供一系列大型项目常用的 ...

  2. Node.js中的模块接口module.exports浅析

    在写node.js代码时,我们经常需要自己写模块(module).同时还需要在模块最后写好模块接口,声明这个模块对外暴露什么内容.实际上,node.js的模块接口有多种不同写法.这里作者对此做了个简单 ...

  3. [Umbraco] document type里的父节点与子节点的设置

    虽然我们不能像做数据库设计那样建立主外键关系.但我们建立xml里父子关系,父子关系其实是指是否允许在一个页面(如频道,分类,栏目等)下创建子页面,这就相当于建立站点的树状结构,对于筛选数据会有很大的作 ...

  4. puppeteer(headless chrome)实现网站登录

    puppeteer简介 puppeteer是Chrome团队开发的一个node库,可以通过api来控制浏览器的行为,比如点击,跳转,刷新,在控制台执行js脚本等等.有了这个神器,写个爬虫,自动签到,网 ...

  5. 工具-CrashMonkey4IOS，Monkey测试方案

    在TesterHome看到了CrashMonkey4IOS,顿时觉得之前用instrument在做monkey测试,非常的弱智!crash后啥都看不到,无crashlog,无crash步骤,并且也不能 ...

  6. mpvue图片轮播遇到的问题

    小程序官方写法: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" i ...

  7. 进程间通信 IPC（Inter-Process Communication）

    目录 一.管道 二.FIFO 三.消息队列 四.信号量 五.共享存储 六.网络IPC:套接字   一.管道 管道是进程间通信中最古老的方式,所有UNIX都提供此种通信机制.管道有以下两种局限性: 历史 ...

  8. mysql数据库中实现内连接、左连接、右连接

    原文:http://www.cnblogs.com/xwdreamer/archive/2010/12/15/2297058.html 内连接:把两个表中数据对应的数据查出来 外连接:以某个表为基础把 ...

  9. INTEST/EXTEST SCAN

    INTEST scan指的是对IP 内部的scan cell的扫描测试,针对IP内部的flip-flop进行shift/capture的操作.和INTEST SCAN 对应的就是EXTEST SCAN ...

  10. 我的MQ笔记

    1.安装IBM MQ 1.1.安装先决条件: (1)WebSphere  Eclipse  Platform  V3.01 (2)为Windows域用户配置WebSphere MQ用户 1.2.安装程 ...