需求:

  移动端用户反馈功能,有的用户反馈功能是有字数限制的,比如限制为200字

解决方法:

  在项目中我们使用的Vue框架,所以可以直接进行绑定,代码如下

<section class="opinion">
  <textarea class="issue" id="issue" name="issue" placeholder="请输入" v-model="inputtext" maxlength="200"></textarea>
  <div class="count"><div class="num"><i id="counter">{{sum}}</i>/200</div></div>
</section>

computed:{
  sum:function(){
    return this.inputtext.length
  }
}
其中有一个问题:由于该方法限制长度为200,所以当输入到200时将禁止写入文本框,当使用ios 26键盘拼音出入汉字时输入过程中比如输入到第199个字再输第200个字时只输入第一个字母就无法继续输入了,因为每个字母就相当于占用了一个字符

H5输入框实时记录文字个数的更多相关文章

  1. jquery的实时触发事件(textarea实时获取中文个数)

    jquery的实时触发事件(textarea实时获取中文个数) (2014-09-16 11:49:50) 转载▼ 标签: 实时触发事件 中文个数 onpropertychange oninput o ...

  2. 历史命令与实时记录(redhat6.8)

    历史命令与实时记录(redhat6.8) linuxshell 2018年02月13日 10时58分53秒 参数 HISTTIMEFORMAT HISTSIZE HISTFILESIZE HISTFI ...

  3. oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测

    这几天项目着急,同时也学到好多以前没有接触过的知识.oninput.onchange与onpropertychange事件的区别, 与input输入框实时检测 onchange事件只在键盘或者鼠标操作 ...

  4. 让input表单输入框不记录输入过信息的方法

    有过表单设计经验的朋友肯定知道,当我们在浏览器中输入表单信息的时候,往往input文本输入框会记录下之前提交表单的信息,以后每次只要双击input文本输入框就会出现之前输入的文本,这样有时会觉得比较方 ...

  5. js对输入文字个数的限制...

    发表留言或者微博的时候,对输入文字个数的限制,下面分两种情况,每种分别介绍两种实现方式: 第一种:一个汉字算一位,两个字母或符号算一位. 通过ASCII编码来判断 textarea.onkeyup = ...

  6. javascript实现记录文本框内文字个数

    最近在做一个项目中遇到这样一个问题,要对文本框中用户输入的文字进行记数,在下面显示出来,因为我们做的是一个短信发送平台,现在我们国家的短信服务,如果你的信息超过了70个字符,短信就会按二条给你下发.所 ...

  7. 一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现

    https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技 ...

  8. web杂记-禁止输入框自动填充文字

    1:背景 公司基于业务需求开发了一套纯JS的时间控件,本来用得好好得.后来发现在部分浏览器下使用该时间控件会出现输入框自动填充的部分与控件的展示产生了冲突: 如图: 2:问题分析 因为部分浏览太人性化 ...

  9. Js制作点击输入框时默认文字消失的效果

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-02-17) 为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢 ...

随机推荐

  1. sql ————视图

    视图与表的区别: 区别:1.视图是已经编译好的sql语句.而表不是 2.视图没有实际的物理记录.而表有. 3.表是内容,视图是窗口 4.表只用物理空间而视图不占用物理空间,视图只是逻辑概念的存在,表可 ...

  2. 线上故障排查——drools规则引擎使用不当导致oom

    事件回溯 1.7月26日上午11:34,告警邮件提示:tomcat内存使用率连续多次超过90%: 2.开发人员介入排查问题,11:40定位到存在oom问题,申请运维拉取线上tomcat 内存快照dum ...

  3. Accord.NET_Naive Bayes Classifier

    我们这个系列主要为了了解并会使用Accord.NET中机器学习有关算法,因此主要关注的是算法针对的的问题,算法的使用.所以主要以代码为主,通过代码来学习,在脑海中形成一个轮廓.下面就言归正传,开始贝叶 ...

  4. ffmpeg.exe下载

    下载链接:http://pan.baidu.com/s/1cGTe6y

  5. 让初学者快速了解Git

    Git工作原理 为了更好的学习Git,我们们必须了解Git管理我们文件的3种状态,分别是已提交(committed).已修改(modified)和已暂存(staged),由此引入 Git 项目的三个工 ...

  6. matrix()方法与translate()、scale()、rotate()、skew()方法的关系

    2D变换方法translate().scale().rotate().skew()与matrix()的关系举例介绍. 一.介绍 2D变换方法: translate():根据左(X轴)和顶部(Y轴)位置 ...

  7. java 基础知识及Servlet基础

  8. Java设计模式汇总

    Java设计模式汇总 设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接模式. ...

  9. 访问被拒绝。 说明: 访问服务此请求所需的资源时出错。服务器可能未配置为访问所请求的 URL。

    打开web.config 然后将 <authorization> <deny users="?" /> </authorization> 改为 ...

  10. 安徽省2016“京胜杯”程序设计大赛_A_砝码称重

    砝码称重 Time Limit: 1000 MS Memory Limit: 65536 KB Total Submissions: 61 Accepted: 37 Description 小明非常喜 ...