关于JavaScript限制字数的输入框的那些事

前言

最近产品需要做不少输入框，产品想要的交互效果是：用户可以输入中英文，随着用户输入能实时显示已经输入的字符个数，当超过数量限制时输入框边框变红，同时给用户提示信息。

这交互听起来没啥问题，技术实现上似乎也没啥难点。但是当我实现出来以后遇到中文输入法就有坑了。

怎么个坑呢，且看下文~~

实时监测输入框内容长度所遇到的坑使用 oninput事件来监听

使用这个oninput事件的好处有2个：

当用户通过右键复制改变输入框内容时，可以监听到；

只有在输入框内容发生变化时才会触发此事件，比如用户按下方向键、control/shift 等这些控制字符键时此事件是不会触发的；

当你输入英文字符或者数字时效果完美，甚至在你正常输入中文时也效果完美。但当你非正常输入中文时就出现 bug 了。非正常输入是怎样的呢？看下面这张示例图：

看到了吗，在这种中文输入方式下，其实用户还没有输入他想输入的中文，只是输入了几个拼音，但 input 事件被触发了，而且监听到的输入框value居然是d'd'd，不单单是拼音字符，还包括了分隔的点。假如输入框内容长度被限制为不超过5，那么在截图这种情况下，就会提示用户字符长度超过限制！。这样的交互效果当然不是产品想要的。

使用onkeydown/onkeypress/onkeyup事件来监听

这几个事件的缺点是无法监听右键复制而来的输入内容，但是否也会存在与input事件一样的问题呢？

我做了几个实验，发现keydown、keyup都会遇到和 input一样的问题，但keypress没有这个问题，因为在中文输入状态下，keypress不会触发，不单是你输入拼音的过程中不会触发，等你选中所要输入的中文如“对对对”后也不会触发。那么当输入“对对对”后虽然超过了字符限制但无法给出字符长度超过限制！的提示。

折中解决方法

要想做到实时监测内容长度，又想保证中文输入法状态下没有 bug，我折腾了好久最后发现 臣妾做不到呀！（要是哪位豪杰找到了，一定要告诉我呀~~）。

所以最后牺牲了下用户体验，找到了一个折中的方式：输入框失去焦点时（即blur），或者用户输入回车键时才进行内容长度的检测。当然如果发现输入框内容超过限制，要将光标停留在输入框内，方便用户进行修改。

哎，一说到用户输入回车键时才进行内容长度的检测又得说说以前栽的坑了

输入框中如何检测输入了回车键

其实这是一个很常见的交互，比如修改名称时支持用户输入回车后直接保存、登录时支持用户输入回车后直接登录。但其中要小心的坑是：**中文输入法下按回车键来输入英文字符**。

中文输入法下按回车键来输入英文字符的过程举例：

比如我要输入账号进行登录，我的账号是全英文的，我当前处于中文输入法，但我懒得切换输入法，于是我就直接敲了我的账号（全英文字符），这时搜狗输入法给我提示了一大串中文，然后我按了个回车，输入框就输入了我想要的英文字符。

在这种情况下，用户虽然输入了回车键，但用户按下回车键只是想在中文输入法下输入英文字符而已，这个回车键并不是我们想要监听的回车键。那么怎么排除这种情况下的回车键呢？

一般来说监听回车键我们会用keydown事件或者keyup事件，实现代码如下所示。那么是否这两种方法都能过滤掉我们不想监听的回车键呢？

//方法一：使用 keydown 事件
input.onkeydown = function(e){
 if(e.keyCode == 13){
  //用户输入的是回车键
  //做相关操作
 }
}
//方法二：使用 keyup 事件
input.onkeyup = function(e){
 if(e.keyCode == 13){
  //用户输入的是回车键
  //做相关操作
 }
}

经过试验发现：使用keydown是可以成功过滤的，但使用keyup不能。

那么我们来看看为什么？

是因为在keydown事件中：中文输入法状态下输入的回车键，检测的 keyCode为 229 而不是13；单纯输入一个回车时，keyCode才是13。

而在keyup事件中：中文输入法状态下输入的回车键，检测的 keyCode是13；单纯输入一个回车时，keyCode也是13。

下图是我打印在 console 中的结果：(代码示例见这里)

结语

关于输入框涉及到的几个事件：keydown/keyup/keypress/input/change

查看这里：http://www.jb51.net/article/21237.htm

赞 (0)

相关推荐

  • JavaScript中统计Textarea字数并提示还能输入的字符

    现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体验. 如果实现这种技术呢,我进行了一些研究,发现实现其实挺简单,几行代码就能完成输入字符统计功能,经过实际测试,其对文字的统计与Twitter等微博客的完全相同. 使用方法是,先增加一个span,用于显示剩余的字数,然后在Textarea中,加入一个onkeydown和onkeyup的事件,调用另一

  • JavaScript动态提示输入框输入字数的方法

    本文实例讲述了JavaScript动态提示输入框输入字数的方法.分享给大家供大家参考.具体如下: 在QQ空间里有小纸条那么一个功能,随着你在文本框中输入多少字,上面会动态提示你"已经输入多少字"和"还可以输入多少字",觉得挺好的,所以自己也试着做做,呵呵.   开始,我想很多人第一感觉就是通过js的 onkeydown或者onkeyup来做,中发现还可以用focus + setInterval() +blur来达到我们需要的效果,于是很快的我利用这种方法自己粗糙的写

  • .NET+JS对用户输入内容进行字数提示功能的实例代码

    第一步:以下是核心代码,在页面引用或进行封装都可. 复制代码 代码如下: <script language="javascript" type="text/javascript"> function textLimitCheck(thisArea, maxLength, SpanId) { if (thisArea.value.length > maxLength) { thisArea.value = thisArea.value.substri

  • Javascript实现真实字符串剩余字数提示的实例代码

    复制代码 代码如下: //文本框剩余字数提示(字符大小) function textLimitCheckSj(thisArea, maxLength, SpanId) {     var str = thisArea.value;     if (getChrLen(str, maxLength) > maxLength * 2) {         thisArea.value = str.substring(0, x-1);     }     else {         var vars

  • 利用Angularjs和原生JS分别实现动态效果的输入框

    利用Angularjs和原生JS分别实现动态效果的输入框

    在刚开始没有给输入框添加焦点之前,没有任何效果.见下图: 然后点击其中任何一个,焦点就会触发一个动画,动画的结果见图二: 中间的输入登录密码文字,会自动添加到顶部(原谅我没有截取到动画过程的图片). 我测试了一下,这样的效果只有高级浏览器支持(IE只有IE10.IE11.Edge支持). 下面我来把代码贴上来,原理很简单,就是通过事件触发类名的增加和删除.具体的动画由CSS3来实现,这也是为什么低级浏览器不支持的原因. 原生JS实现示例: <!DOCTYPE html> <html la

  • AngularJS实现的输入框字数限制提醒功能示例

    AngularJS实现的输入框字数限制提醒功能示例

    本文实例讲述了AngularJS实现的输入框字数限制提醒功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net AngularJS字数提示</title> </head> <style> *{ margin:0; paddi

  • Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）

    把js的验证方法改成angular可使用的方法 AngularJS文件的写法: $scope.clearNoNum = function(obj,attr){ //先把非数字的都替换掉,除了数字和. obj[attr] = obj[attr].replace(/[^\d.]/g,""); //必须保证第一个为数字而不是. obj[attr] = obj[attr].replace(/^\./g,""); //保证只有出现一个.而没有多个. obj[attr] = o

  • JavaScript输入框字数实时统计更新

    JavaScript输入框字数实时统计更新

    在前端开发中,很多情况下需对输入内容进行验证.实时统计功能,对于定长输入而言,可以让用户实时明确输入界限,并合理安排内容. 字数实时统计更新 下面将以[消息内容]为例,设计实现输入框字数实时统计更新功能. 项目架构如下: message  message.css     message.js     message.tpl 1. 在message.tpl文件中定义网页元素 //移动端微信公众号开发 <div class="weui-cell__bd"> <textar

  • 关于JavaScript限制字数的输入框的那些事

    关于JavaScript限制字数的输入框的那些事

    前言 最近产品需要做不少输入框,产品想要的交互效果是:用户可以输入中英文,随着用户输入能实时显示已经输入的字符个数,当超过数量限制时输入框边框变红,同时给用户提示信息. 这交互听起来没啥问题,技术实现上似乎也没啥难点.但是当我实现出来以后遇到中文输入法就有坑了. 怎么个坑呢,且看下文~~ 实时监测输入框内容长度所遇到的坑使用 oninput事件来监听 使用这个oninput事件的好处有2个: 当用户通过右键复制改变输入框内容时,可以监听到: 只有在输入框内容发生变化时才会触发此事件,比如用户按下

  • 基于JavaScript实现随机颜色输入框

    基于JavaScript实现随机颜色输入框

    废话不多说了额,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table{width:500px;height:400px;} table td{width:100px;height:50px;} </style> <script> window.onl

  • 基于javascript实现仿百度输入框自动匹配功能

    本文实例讲解了基于javascript实现仿百度输入框自动匹配功能的详细代码,现在很多网站都有这种效果,在文本框输入一个字符,下边会出来相匹配的内容,这个代码就演示了这个功能是如何完成的,当然,这是个静态的,你可以将提示的内容从数据库读取出来,要用到AJAX那东东,分享给大家供大家参考,具体内容如下 <HTML> <HEAD> <title>带输入匹配的文本框</title> <style> body,div { font-family:verd

  • javascript textarea字数限制

    这一个是读取textarea的maxlength属性的值,进行计算,思路很好,但修改起来就麻烦啊,不过对于js爱好者来说是个不错的参考,通过读取属性值进行控制. textarea字数限制 练习代码多有参考网络 by ahuinan var TextUtil = new Object(); TextUtil.NotMax = function(oTextArea){ var maxText = oTextArea.getAttribute("maxlength"); if(oTextAr

  • Javascript实现字数统计

    字数统计功能,原理是给textarea添加onKeyup事件,事件读取textarea内容并获得长度,并赋值给统计字数的那个文本节点,这里有一点要注意的是添加onKeypress和onKeydown事件也能实现效果,但都有些不足,会在某些情况下造成误解,我都试了下,感觉只用一个onKeyup事件是最明智的选择. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&g

  • javascript弹出层输入框(示例代码)

    如下所示: 复制代码 代码如下: <script language="javascript" type="text/javascript">         function alertWin(title, msg, w, h) { var titleheight = "22px"; // 窗口标题高度             var bordercolor = "#666699"; //窗口的边框颜色      

  • 利用javaScript实现点击输入框弹出窗体选择信息

    在这里奉上源代码,没有做样式处理,不过功能是可以的,希望大家可以和我交流交流! 复制代码 代码如下: <html> <head>  <title>点击弹出DIV选择信息</title>     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">     <meta http-equiv="description&

  • JSP中使用JavaScript动态插入删除输入框实现代码

    JavaScript代码: 复制代码 代码如下: <script language="javascript"> function addrows(){ var len = optionlist.rows.length; //得到table的行数 var obj = optionlist.insertRow(len);//在最后一行插入 /**插入第一列**/ obj.insertCell(0); obj.cells(0).innerHTML="选项" +

  • JavaScript组件开发之输入框加候选框

    JavaScript组件开发之输入框加候选框

    1.兼容ie8 主要是事件兼容 var EventUtil = { on:function(elem,type,handler){ if(elem.addEventListener){ elem.addEventListener(type,handler,false); }else if(elem.attachEvent){ elem.attachEvent("on"+type,handler); } }, getEvent:function(event){ return event|

  • 用javascript实现的激活输入框后隐藏初始内容

    <div> <label for="email">Email</label> <input name="email" type="text" id="email" style="width:134px;" onfocus="if(this.value==’Input your email’)this.value=’’;"onblur="

随机推荐