html 输入字数限制,说一说限制字数的输入框踩的坑
前言
最近产品需要做不少输入框,产品想要的交互效果是:用户可以输入中英文,随着用户输入能实时显示已经输入的字符个数,当超过数量限制时输入框边框变红,同时给用户提示信息。
这交互听起来没啥问题,技术实现上似乎也没啥难点。但是当我实现出来以后遇到中文输入法就有坑了。
怎么个坑呢,且看下文~~
PS: 本文所有实验相关代码都在 jsbin 中:https://jsbin.com/bolugo/edit...,大家可以访问此链接自行进行实验。
实时监测输入框内容长度所遇到的坑
使用 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的更多介绍,我单独再写一篇博客再讲吧~~~
html 输入字数限制,说一说限制字数的输入框踩的坑相关推荐
- 说一说限制字数的输入框踩的坑
前言 最近产品需要做不少输入框,产品想要的交互效果是:用户可以输入中英文,随着用户输入能实时显示已经输入的字符个数,当超过数量限制时输入框边框变红,同时给用户提示信息. 这交互听起来没啥问题,技术实现 ...
- div模拟textarea文本框,输入文字高度自适应,且实现字数统计和限制
需求: 文本框可根据输入内容高度自适应,不带滚动条,高度可变的那种,我搜索了很多,发现textarea无法实现我的需求,scrollHeigh这个无法获取实际内容的高度(我用的是那种简单的,可能我写的 ...
- 怎么用python统计字数_使用Python 统计高频字数的方法
问题 (来自Udacity机器学习工程师纳米学位预览课程) 用 Python 实现函数 count_words(),该函数输入字符串 s 和数字 n,返回 s 中 n 个出现频率最高的单词.返回值是一 ...
- html 实时统计字数,记一次前端 input、textarea输入框实时 统计字数(真实字数)...
需求:实时监听textarea/input的输入变化,并在页面上显示还能够输入多少字符. 初始做法(有问题,不准确): 仅仅使用on keyup事件 :导致在输入的时候会根据输入法状态把汉字拼音算进 ...
- html右下角的字数计算,JavaScript_用JS剩余字数计算的代码,先看看HTML代码: textarea name - phpStudy...
用JS剩余字数计算的代码 先看看HTML代码: 文字最大长度: 250. 还剩: 250. 可以看出onkeyup是当用户离开键盘后触发的事件,传递的参数是this(也就是当前所在的文档区域) 然后结 ...
- Android获取文字字数,如何实现一个简单的字数统计,限制功能
Layout样式: layout 代码:<?xml version="1.0" encoding="utf-8"?> xmlns:android= ...
- android edittext字数显示不全,Android的EditText字数检测和限制解决办法
Android的EditText字数检测和限制解决办法 控件EditText在Android布局中经常用到,对EditText中输入的内容也经常需要进行限制,我们可以通过TextWatcher去观察输 ...
- adb 输入很长的内容 (input text) 在模拟机输入框里面快速输入内容
有时候需要在模拟机上面输入很长的内容来测试, 可以使用input text xx 来输入 步骤1 adb shell 步骤2 input text xxxxxxxx 注意:需要先清理模拟输入框里面的内 ...
- HTML怎么限制每行字数,JS实现每行固定字数,自动换行
JS实现每行固定字数,自动换行 autoWrap.html 原码 .wrap_focus{border-width: 3px;border-style: solid;border-color:oran ...
- html 输入框变红色,input输入框 输入错误时,点击注册按钮,输入框的边框变成红色,重新输入时,边框颜色恢复原来的,同时错误提示消失?...
若输入框有误,则点击立即注册,输入框的颜色会变成红色,在输入框中输入正确的值的过程中,输入框的边框变成正常的颜色. 用 户 名 id="form_item_account" n ...
最新文章
- linux 文件系统_Linux 虚拟文件系统
- python装饰器原理-深刻理解python装饰器
- Java反射理解与案例
- leetcode 刷题142 143
- centos移动文件到指定目录_Dynamo批量分离中心文件并另存到指定目录
- LeetCode 349. 两个数组的交集(哈希)
- 小米手机查看linux代码,如何识别小米设备-MIUI系统
- 268. 丢失的数字 Missing Number
- 无语!JDK 8 中的 HashMap 依然会死循环…
- springboot(运行原理参考借鉴)
- 安卓Activity布局简述
- string.join用法
- Silverlight 实现文件下载
- python中pop类型_Python基础之基本数据类型
- Ember component
- gentoo Cataclysm - Dark Days Ahead
- 计算机软件考试成绩查询时间,2020年计算机软考什么时候出成绩,怎么查成绩?|...
- c语言OBD编程,汽车OBD2诊断程序开发
- 在react中使用swiper/react
- 树莓派frp内网穿透
热门文章
- BLE_BQB Test_Carrier frequency offset and drift, LE Coded (S=8)_RF-PHY/TRM/BV-14-C
- 每天吃一个核桃好处多多,坚持半年以上,身体会发生五种变化
- ARM920T S3C2440 的中断系统
- RocketMQ存储篇——整体结构以及MappedFile讲解
- 华中科技大学计算机学院陈迪,华中科技大学2011届“优秀毕业生”公示名单
- ppm与LSB含义,换算
- hcia hdcp实验
- 约瑟夫环问题java_Java求解约瑟夫环问题
- 【数据处理】Python matplotlib绘制双柱状图以及绘制堆积柱状图——保姆级教程
- IIS环境网站http服务器内部500错误的解决方法