Textarea输入字数限制实例(兼容iOS&安卓)

maimu 2019-05-09

最近在做一个微信公众号的页面，其中有对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。

maimu

maimu

相关推荐

去掉谷歌浏览器获取焦点时默认的input、textarea的边框

Chrome上当鼠标焦点在input、textarea这些元素上时，Chrome默认的会给它们加上黄色的边框。我用这个CSS，没有用。

zengni / 0评论 2020-04-16

jquery插件——仿新浪微博限制输入字数的textarea

#test{border:1px solid #d9d9d9; padding:0 1%;line-height: 1.8;font-family: "microsoft yahei";font-size: 14px;display:

Vipwxs / 0评论 2018-12-19

javascript textarea字数限制

textarea字数限制 练习代码多有参考网络 by ahuinan. alert("对不起，不能大于20个字节，中文算两个！更多的计算字符串长度代码，可以参考这一篇文章。

javaer / 0评论 2008-09-02

个人小程序笔记 - 持续收录自己一年的小程序开发注意事项

记录小程序常见问题组件(标签)问题textarea表单页面经常遇到ios和andriod表现出来的边距不同问题。表单一般都是从上而下填写的, 悬浮设计为非必要. 因笔主说不过, 只能麻烦的隐藏显示, ios没事,但安卓切换显示表现不友好.

jscjxysx / 0评论 2019-07-01

html textarea文本域高度自适应

</html>2、其实这个段代码有些小瑕疵，输入的时候，高度自适应，但是足字删除输入的内容时，高度就不自适应了。本人改进办法，由于时间仓促，可能不是很好，如果你有好的方式，可以告诉我，在这里谢谢了。解决：因为文本域宽度200px，测试了下，每行

冯二爷 / 0评论 2019-07-01

微信小程序从入坑到放弃之坑八：textarea在苹果手机中的大Bug

首次在这里写点东西，还请各位大佬担待点。而且如果看官手中没有苹果手机测试的话，这个可就真的是个坑了！这绝对是一个超大的Bug！！！是的，按照正常逻辑，这个空隙就是由padding引起的。顺便补充一句，微信官方提供的判断依旧不全面，最新出来的苹果手机还没有完

Donutsapps / 0评论 2019-06-29

jquery插件——仿新浪微博限制输入字数的textarea

#test{border:1px solid #d9d9d9; padding:0 1%;line-height: 1.8;font-family: "microsoft yahei";font-size: 14px;display:

无情 / 0评论 2018-12-19

jquery实现textarea发布框限制文字字数输入(添加中文识别)

　　var v = obj.val(), charlen = 0, maxlen = !200 : maxlen, curlen = maxlen, len = v.length;<span id="checklen">还可

87281248 / 0评论 2017-09-28

jquery实现textarea输入框限制字数的方法

本文实例讲述了jquery实现textarea输入框限制字数的方法。分享给大家供大家参考。网上有使用属性disabled来实现，这个不好，想修改都没有修改。当然，这个也不是很完美。<h6>说点什么吧，你可以输入<span>140&l

原為簡單 / 0评论 2017-09-28

CSS公共方法-去掉各类默认属性

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}. .clearfix:after{content:&q

web开发 / 0评论 2017-01-16

由一个项目需求引发的 - textarea中的换行和空格

当我们使用 textarea 在前台编辑文字，并用 js 提交到后台的时候，空格和换行是我们最需要考虑的问题。其实之前在接触的时候，完全没有考虑过这些问题，也是因为最近做的项目里面有一个这样子的需求，要求用户在 textarea 输入文字，提交之后以文章的

勤能补拙孰能生巧 / 0评论 2019-06-28

treegrid-3.0范例：设置静态数据集

<input type="button" value="更新数据集" onclick="updateDataset()">. {"title": "组织名

wndong / 0评论 2015-12-14

PHP开发学习笔记

这种情况应该怎么办呢？addslashes是可以使单引号(,),双引号(")，反斜线(\)与NULL加上反斜线进行转义。echo '魔术引号未开启,$textarea需要转义','<br />';

shishaoe / 0评论 2015-04-10

有意思：textarea resize属性下纯CSS交互效果

有人保留，有人嫌碍事，直接resize:none;掉，但是，估计没人利用整个儿做交互效果。一个半透明遮罩层随着拖动把张含韵给覆盖了，达到了半遮面的交互效果。但是，如果文本域右侧定位，则右侧不动，宽度往左侧扩展。

csstpeixun / 0评论 2015-04-02

用JavaScript限制textarea输入长度 (For: IE、Firefox ...)

<title> Code：用JavaScript限制textarea输入长度 </title>

xiaocaibai / 0评论 2014-12-19

去除谷歌浏览器input及textarea表单边框特效

谷歌浏览器Chrome基于WebKit开源浏览器引擎，自然能够通过相关的一切方法自定义设置浏览器的默认状态。谷歌浏览器Chrome安装之后，大家应该都留意到所有的表单都会添加黄色边框特效。在某些时候这些特效还是很不错的，但是当网站本身就已经对于表单样式有一

realitycss / 0评论 2014-05-05

extjs 类似jquery的选择器

我们可以先Ext.getCmp获取父panel的组件，然后用它的getValues()方法获取这个form面板所有的子元素的结果集，然后我们用.操作符来获得我们所希望的取值。第二种是通过Ext.query方法，然后传入一个选择器，然后我们得到的是一个HTM

DreamLee / 0评论 2013-12-13

jsp页面中input、textArea去除边框样式

<input type="text" style="border-left:0px;border-top:0px;border-right:0px;border-bottom:1px " value="

切慕溪水 / 0评论 2013-07-11

How to:Set Maxlength of Textarea using jQuery/JavaScript

Setting up maxlength of input text are easy. Just an attribute maxlength="##" does the work. But maxlength attribute d

lkj0 / 0评论 2013-05-24

jquery 获得值 笔记

文本框，文本区域：$.attr；

崔博伦一路有你 / 0评论 2013-04-09

html中textarea的使用及常见的一个问题解决

textarea标签是我们经常使用的一个html标签，主要是在输入较长的文本时,可以实现换行等效果。下面引用一个他的基本使用：。<textarea cols="50" rows="10" id="co

别告诉我有Bug / 0评论 2013-01-17

关于textarea自动生成N多空格的问题

一年前写代码时就遇到这个问题，当时问了N多人找了N多资料都没解决到……就是当提交textarea内容后，总是会在前面加上N多空格。。。实在是不解，连trim都trim不掉。。。。今天又遇到这个问题了，正巧看到一篇关于html标签紧凑书写的文章，于是就想把内

SPARK / 0评论 2009-05-06

javascript的focus函数如何定位到textarea指定地方

今天编程的时候遇到了个问题. 就是客户希望页面载入后吧鼠标定位到一个textarea的开始部分. 本来javascript的focus函数可以解决的. 但问题是当当textarea里面有内容的时候. 鼠标就定位到了内容的后面. 必须自己写函数来实现定位到头

小丫00 / 0评论 2012-11-07

jquery清空表单数据

$("input").attr("value","");$("input").attr("checked",false);$("textarea&

shanhuijava / 0评论 2012-10-18

去掉谷歌浏览器默认的input、textarea的边框

}2、用chrome登录了一次并记录了COOKIES之后，再次打开，CHROME记录了上次输入的内容，背景图片就会被覆盖一层淡黄色的背景色，点击一下鼠标，背景图片才显示出来。

opspider / 0评论 2012-08-08

chrome html+css 使用记录

<input type="text" id="username" name="usernmae" style="-webkit-border-radius: 4px; -moz-b

gxyblue / 0评论 2012-05-23

IE 下 css 设置透明度造成 input 内光标异常的问题

zTree v3.0 正式版发布后，有朋友反映 IE 下修改节点名称时，如果输入的字符串较长，超过了输入框可显示的长度后，用键盘左右键前后移动光标会出现异常——光标到达顶端后，文字并不会跟着一起移动！个人感觉这应该算是个比较严重的 bug 了，一开始怀疑是

teresalxm / 0评论 2012-02-01

jQuery validation 与 tinyMCE兼容

<scripttype="text/javascript"src="tiny_mce.js"></script>. mode:"textareas",theme:"

摄郎Elements / 0评论 2012-01-12

css 文本框定宽

给文本域设置定宽，避免在对该文本域的内容进行验证的时候，出现文本框变化的情况。<s:textarea name="" cssStyle="width:400px;overflow-y:visible;">

startXUEBA / 0评论 2011-12-09

HTML5 给input和textarea HTML标签增加 prompt

下面的例子展示了，如何给INPUT和TEXTAREA标签通过设置attribute。<td><input id="psswd" type="password" name="password

andyhu00 / 0评论 2011-10-26

div模拟textarea以实现高度自适应（去掉默认的@ mailto）

<!<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>. <linkrel="stylesheet&q

每天积累一点点 / 0评论 2011-08-31

如何让textarea自动换行-注意wrap属性

--content with more link-->html的textarea控件的自动换行是由wrap控制的。wrap属性定义了输入内容大于文本域时显示的方式，其实我们无法使textarea自动换行很多情况都是自己没有加了不该加的属性限制。Off

帅的相对论 / 0评论 2011-08-18

Javascript 获取 textarea 光标 文字 位置 内容 IE Firefox

最近帮朋友做一个获取文字内容，并处理选中文字的Javascript程序。本来上网查查，用Firefox搞定了，包括Opera、Safari，不过到IE那里遇到很多问题！！！还发现了IE的一个Bug！之后，objRange.text会莫名其妙的多出一个空格，

rou / 0评论 2011-07-11

为textarea 增加 maxlength 属性

<textarea onkeyup="this.value = this.value.slice(0, 80)"></textarea>. <script language="javascript

麋鹿麋鹿迷了路 / 0评论 2011-05-07

基于jQuery的140字输入限制

<textarea name="content" id="status" class="textarea">#今日最给力话题#</textarea>javascript：

msyndra / 0评论 2011-02-16

jQuery之监听input、textarea输入框值变化

使用ionic中ng-change可以监听input的框值变化，但是如果为textarea的话，就没有使用ng-change的事件了，所以在这介绍一个两者兼得的方法：。因此这篇文章向大家介绍一种完美的解决方案：结合 HTML5 标准事件 oninput 和

82113458 / 0评论 2018-07-08

HTML DOM Textarea 对象

Textarea 对象代表 HTML 表单中的一个文本域 。HTML 表单的每一个 &lt;textarea&gt; 标签，都能创建一个Textarea 对象。您可以通过索引相应表单的元素数组来访问某个 Textarea 对象，或者使用 g

jacky / 0评论 2016-09-20

BootStrap表单控件之文本域textarea

-- 可选的 Bootstrap 主题文件 -->. -- 最新的 Bootstrap 核心 JavaScript 文件 -->

移动开发与培训 / 0评论 2017-05-23

jquery根据name取得select选中的值实例(超简单)

<option value="0" selected="selected" tier="1">省、直辖市</option>

xxglh / 0评论 2018-01-25

jquery实现限制textarea输入字数的方法

jquery怎么实现限制textarea输入的字数呢？有需要的朋友可以参考一下我写的例子，当然如果有误，也希望大家能及时指出来，大家共同学习进步。

delmarks / 0评论 2017-09-06

jquery实现文本框textarea自适应高度

浏览器中默认的文本框是不能根据内容的增多变高，只能固定高度有滚动条，体验不是很好，找了很多方法兼容都不行，总算找到个兼容良好的方法：

88066525 / 0评论 2016-03-09

jQuery编写textarea输入字数限制代码

$.bind(bind_name, function () {//给textarea绑定事件。var strlen = $.val().replace.length;//读取转换得到长度，中文转换成2个长度，英文空格忽视算1个长度。$.text(funct

81971235 / 0评论 2017-03-23

JavaScript中Textarea滚动条不能拖动的解决方法

本文实例分析了JavaScript中Textarea滚动条不能拖动的解决方法。分享给大家供大家参考，具体如下：。在IE中，你是否碰到过Textarea的滚动条不能拖动，但点上下按钮可以滚动内容？这个问题的原因很可能就是在该Textarea中绑定了onfoc

arbitatry / 0评论 2015-12-15

JQuery统计input和textarea文字输入数量(代码分享)

本文主要介绍了jQuery实现统计输入文字个数的方法,需要的朋友可以参考下。<input type="text" value="我是输入的文字" maxlength="10" id=&quo

linwenx / 0评论 2016-12-29

jquery实现（textarea）placeholder自动换行

var placeholder = '第一行文本提示\n第二行文本提示\n第三行文本提示';

88463364 / 0评论 2016-12-22

JavaScript实现为input与textarea自定义hover,focus效果的方法

本文实例讲述了JavaScript实现为input与textarea自定义hover,focus效果的方法。分享给大家供大家参考。这里演示JavaScript为input输入框和textarea文本框自定义hover,focus效果，hover也就是鼠标放

zgwyfz / 0评论 2015-08-21

javascript实现textarea中tab键的缩排处理方法

本文实例讲述了javascript实现textarea中tab键的缩排处理方法。分享给大家供大家参考。网上搜索了一下相关的解决方法，其它的有使用两三行javascript解决的，但都有一些小小的问题。还有使用JQuery的，也非常简洁。本文的javascr

zangshuge / 0评论 2015-06-26

javascript正则表达式中的replace方法详解

我们来回顾一下replace方法的使用：先定义一个正则对象：var re=/中间写匹配的条件/;replace（）：正则匹配字符串，若是匹配成功，将匹配成功的字符串用新的字符串来替换语法：字符串.replace；var re=/你妹|fuck|你大爷|萌萌

bianhuakairi / 0评论 2019-04-26

解决ueditor jquery javascript 取值问题

var content = UE.getEditor.getContent();myEditor是ueditor 的名称name。</script>方法很简单，小伙伴们是否了解了呢？

jQuerys / 0评论 2019-04-25