ios下多行文本输入框bug，textarea标签的maxlength属性在ios上计算

描述问题：

textarea多行文本输入在ios上的bug

问题原因：

textarea标签的maxlength属性在ios上计算有问题，ios的换行会占用两个字符。如下：ios换行（\n）其实是占用了两个字符，但是计算规则却依然是按照一个字符来计算的，就导致了，显示还可以输入一个字符，但是实际上却输入不了。

解决思路：

ios设计的maxlength计算规则很明显我们是无能为力的，所以解决方案只能从maxlength入手。

解决方案：

在ios上在当有换行符(\n)的时候我们让maxlength 加 1，就可以了，如果有两个换行符那就加2

//html
<textarea :maxlength="handleCurrentMaxLen(description, 20)" v-model="description"></textarea>
<span>{{description.length}}/20</span>
// methods
handleCurrentMaxLen(str, maxLen) {if (isIos() && isMobile) {let reg = new RegExp(/\n/g);let lineNum = str.match(reg);return lineNum ? lineNum.length + maxLen : maxLen} else {return maxLen}
}// 注意：只要description改变了handleCurrentMaxLen 就会重新执行

实际解决方案中：

实际项目中我们多用组件实现（因为搭配的有校验规则）多行文本，此时思路是不变的，需要注意的是，需要拿到"剩余还可输入的dom"，然后在input事件中给这个dom的innerText赋值为：绑定文本的length属性。

ios下多行文本输入框bug，textarea标签的maxlength属性在ios上计算相关推荐

HTML中的多行输入框：textarea标签、cols属性、rows属性。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>下拉列 ...
HTML textarea 标签的 wrap 属性
HTML <textarea> 标签的 wrap 属性 wrap 属性通常情况下,当用户在输入文本区域中键入文本后,浏览器会将它们按照键入时的状态发送给服务器.只有用户按下 Enter ...
关于微信小程序textarea中的maxlength属性失效问题
关于微信小程序textarea中的maxlength属性失效问题代码菜鸡今天在编写小程序前端代码时,遇到了一个问题:textarea输入140个字以后,就再也输不进去了,想着设置一下maxlengt ...
【web】textarea标签的cols属性失效，解决办法
经过一系列的测试我发现textarea标签如果放在设置了弹性布局且主轴设置为垂直方向时, textarea标签的cols属性会失效,父容器有多宽textarea的文本框就有多宽还不知道是什么原因 ...
解决IE下textarea不识别maxlength属性的问题
首先先看一个比较简单的处理办法,代码如下: $("textarea[maxlength]").keyup(function () {var area = $(this);var m ...
iOS原生如何加载HTML中img标签的图片
原文出自:iOS原生如何加载HTML中img标签的图片前言最近iOS App项目中使用Webview加载H5页面比较多,也有不少朋友经常问到这个问题,在这里我也学习学习如何通过iOS原生的方式来加 ...
html 最大输入长度,TextArea设置MaxLength属性最大输入值的js代码
标准的DHTML文档中TEXTAREA的MAXLENGTH属性默认情况下不起作用,只有当事件发生时才起作用如下:http://spiderscript.net/site/spiderscript/e ...
HTML textarea 标签
定义和用法 <textarea> 标签定义多行的文本输入控件. 文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier). 可以通过 cols 和 rows ...
iOS 7.1 的 Safari 为 meta 标签新增 minimal-ui 属性，在网页加载时隐藏地址栏与导航栏...
在过去,用 Safari 打开一个网页后是这样的: 是不是十分不爽?因为顶部的地址栏与底部的导航栏让页面显得非常拥挤,所以用户常常会马上伸手触屏滑动让它们隐藏起来. 始终强调人性化设计的苹果当然注意到 ...