动手写个数字输入框3:痛点——输入法是个魔鬼
时间:2022-04-22
本文章向大家介绍动手写个数字输入框3:痛点——输入法是个魔鬼,主要内容包括前言、IE的先进性、别无他法只能补救~、附录:工具函数、未完待续、总结、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
前言
最近在用Polymer封装纯数字的输入框,开发过程中发现不是坑,也有不少值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历:
- 《动手写个数字输入框1:input[type=number]的遗憾》
- 《动手写个数字输入框2:起手式——拦截非法字符》
- 《动手写个数字输入框3:痛点——输入法是个魔鬼》
- 《动手写个数字输入框4:魔鬼在细节——打磨光标位置》
IE的先进性
辛辛苦苦终于控制只能输入数字了,但只要用户启用了输入法就轻松突破我们的重重包围:-<心碎得一地都是。这是我们会想到底有没有一个API可以禁用输入法呢?答案是有的,但出人意料的是只有IE才支持。
<style>
.disabled-ime-mode{
/*ime-mode为CSS3规则
*取值
*auto: 不影响IME的状态,默认值
*normal: 正常的IME状态
*active: 激活本地语言输入法
*inactive: 激活非本地语言输入法
*disabled: 禁用IME
*/
ime-mode: disabled;
}
</style>
而其他浏览器就呵呵了。。。
别无他法只能补救~
由于chrome、firefox等无法通过样式ime-mode
来处理,因此想到依葫芦画瓢,同样在keydown事件中对特定的keyCode进行拦截过滤就好了,谁知道在输入法中按下字符键时keydown事件的keyCode永远是229。其规律为:
- 按字符键时,keydown中keyCode恒为229,且key为Undefined;而keyup中才会得到正确的keyCode,且key为正确的字符。
- 按
enter
和shift
时仅触发keydown不会触发keyup,而keyCode为229。 因此我们能做的是 - 通过keyup事件作事后补救措施;
- 在keydown中拦截输入法中输入的
enter
和shift
按键事件,然后自行出发keyup事件执行补救措施。 废话少讲,上代码!
const keyCode = anyPass(prop('keyCode'), prop('which'))
const isBackspace = eq(8)
, isDelete = eq(46)
, isArrowLeft = eq(37)
, isArrowRight = eq(38)
, isArrowUp = eq(39)
, isArrowDown = eq(40)
, isTab = eq(9)
, isHome = eq(36)
, isEnd = eq(35)
const isValidStr = precision =>
a => RegExp("^[+-]?[0-9]*"+ (precision ? "(\.[0-9]{0," + precision + "})?" : "") + "$").test(a)
// 获取min,max,precision值
const lensTarget = lens(a => a.target || a.srcElement)
, lensMin = lens(a => Number(a.min) || Number(attr(a, 'min')) || Number.MIN_SAFE_INTEGER)
, lensMax = lens(a => Number(a.max) || Number(attr(a, 'max')) || Number.MAX_SAFE_INTEGER)
, lensPrecision = lens(a => Number(a.precision) || Number(attr(a, 'precision')) || 0)
, lensValue = lens(a => a.value, (o, v) => o.value = v)
, lensDataValue = lens(a => a && a.getAttribute('data-value'), (a, v) => a && a.setAttribute('data-value', v))
const lensTargetMin = lcomp(lensTarget, lensMin)
, lensTargetMax = lcomp(lensTarget, lensMax)
, lensTargetPrecision = lcomp(lensTarget, lensPrecision)
, lensTargetValue = lcomp(lensTarget, lensValue)
const isIME = eq(229)
const isValidChar = c => /[-+0-9.]/.test(c)
const invalid2Empty = c => isValidChar(c) ? c : ''
const recoverValue = v => flatMap(CharSequence(v), invalid2Empty)
// 是否激活IME
const isInIME = comp(isIME, keyCode)
// 是否为功能键
, isFnKey = comp(anyPass(isArrowLeft, isArrowRight, isArrowUp, isArrowDown, isBackspace, isDelete, isHome, isEnd), keyCode)
$('input[type=text]').addEventListener('keydown', e => {
var el = view(lensTarget)(e)
, val = view(lensTargetValue)(e)
// 暂存value值,keyup时发现问题可以恢复出厂设置
set(lensDataValue)(el)(val)
if (isInIME(e)){
fireKeyup(el)
}
})
$('input[type=text]').addEventListener('keyup', e => {
if (isFnKey(e)) return
var el = view(lensTarget)(e)
, v = view(lensValue)(el)
, p = view(lensTargetPrecision)(e)
, isValid = isValidStr(p)
, max = view(lensMax)(el)
, min = view(lensMin)(el)
var val = recoverValue(v)
var setVal = set(lensValue)(el)
if (isValid(val)){
if (val !== v){
setVal(val)
}
else{
var n = Number(v)
if (!gte(max)(n)){
setVal(max)
}
if (!lte(min)(n)){
setVal(min)
}
}
}
else{
setVal(attr(el, 'data-value'))
}
})
附录:工具函数
// 工具函数,请无视我吧:D
const comp =
(...fns) =>
(...args) => {
let len = fns.length
while (len--){
args = [fns[len].apply(null, args)]
}
return args.length > 1 ? args : args[0]
}
const isSome = x => 'undefined' !== typeof x && x !== null
const invokerImpl =
n =>
o =>
m =>
(...args) => {
let args4m = args.splice(0, n)
, times = Number(args[0]) || 1
, ret = []
while (times--){
var tmpRet
try{
tmpRet = o[m].apply(o, args4m)
}
catch(e){
tmpRet = void 0
}
ret.push(tmpRet)
}
return ret.length > 1 ? ret : ret[0]
}
const curry2Partial =
fn =>
(...args) => {
let c = true
, i = 0
, l = args.length
, f = fn
for (;c && i < l; ++i){
c = isSome(args[i])
if (c){
f = f(args[i])
}
}
return f
}
const invoker = curry2Partial(invokerImpl)
const and = (...args) => args.reduce((accu, x) => accu && x, true)
const or = (...args) => args.reduce((accu, x) => accu || x, false)
const allPass = (...fns) => v => fns.reduce((accu, x) => accu && x(v), true)
const anyPass = (...fns) => v => fns.reduce((accu, x) => accu || x(v), false)
const eq = a => b => a === b
const gt = a => b => a > b
const gte = a => anyPass(eq(a), gt(a))
const lt = a => b => a < b
const lte = a => anyPass(eq(a), lt(a))
const prop = k => o => o[k]
const lens = (g, s) => ({getter: g, setter: s})
const lensPath = (...args) => ({ getter: a => args.reduce((accu, x) => accu && accu[x], a) })
const lcomp = (...lenses) => lenses
const view = lenses => a => {
if (!~Object.prototype.toString.call(lenses).indexOf('Array')){
lenses = [lenses]
}
return lenses.reduce((accu, lens) => accu && lens.getter(accu), a)
}
const set = lenses => a => v => {
if (!~Object.prototype.toString.call(lenses).indexOf('Array')){
lenses = [lenses]
}
var setLens = lenses.pop()
var o = view(lenses)(a)
if (o){
setLens.setter(o, v)
}
}
const $ = invoker(1, document, "querySelector")
const attr = (o, a) => invoker(1, o, 'getAttribute')(a)
const flatMap = (functor, f) => {
return functor.flatMap(f)
}
function CharSequence(v){
if (this instanceof CharSequence);else return new CharSequence(v)
this.v = v
}
CharSequence.prototype.flatMap = function(f){
return this.v.split('').map(f).join('')
}
const fireKeyup = (el) => {
if (KeyboardEvent){
// DOM3
var e = new KeyboardEvent('keyup')
el.dispatchEvent(e)
}
else{
// DOM2
var e = document.createEvent('KeyboardEvent')
e.initEvent('keyup', true, true)
el.dispatchEvent(e)
}
}
未完待续
到这里我们已经成功地控制了IME下的输入,虽然事后补救导致用户输入出现闪烁的现象:D那是不是就over了呢?当然不是啦。 用户输入时,光标位置是随机的,于是遗留以下问题:
- 在keydow中预判断值合法性时,是假定光标位置处于行尾,将导致预判失误;
- 在keyup中对value重新赋值时会导致光标移动到行尾,严重中断了用户的输入流程;
-
type=text
会导致在移动端无法自动显示数字键盘。
总结
后面我们会针对上述问题继续探讨,敬请留意!
- [WCF 4.0新特性] 路由服务[原理篇]
- 通过“访问多种数据库”的代码来学习多态!(.net2.0版)
- [WCF-Discovery] 客户端如何能够“探测”到可用的服务?
- WCF的安全审核——记录谁在敲打你的门
- Step By Step 一步一步写网站[1] —— 填加数据
- 五个解决方案让MongoDB拥有RDBMS的鲁棒性事务
- Step By Step 一步一步写网站[1] —— 帧间压缩,表单控件
- [WCF-Discovery]如何利用”发现代理”实现可用服务的实时维护?
- 深度学习与机器学习
- Step By Step 一步一步写网站[1] —— 填加数据(二)
- [WCF-Discovery]让服务自动发送上/下线通知[原理篇]
- [WCF-Discovery]让服务自动发送上/下线通知[实例篇]
- [WCF权限控制]利用WCF自定义授权模式提供当前Principal[实例篇]
- [WCF权限控制]利用WCF自定义授权模式提供当前Principal[原理篇]
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 《一起学sentinel》三、Slot的子类及实现之NodeSelectorSlot和ClusterBuilderSlot
- 《一起学sentinel》四、Slot的子类及实现之LogSlot和StatisticSlot
- 《一起学sentinel》五、Slot的子类及实现之AuthoritySlot和SystemSlot
- Python 之pyaudio使用随笔
- Determining 32 vs 64 bit in C++
- 在线、离线激活鉴权实战
- Spark vs Dask Python生态下的计算引擎
- 表达差异基因分析
- threadlocal记录
- 2020-09-22:已知两个数的最大公约数,如何...
- 【超详细】分布式一致性协议 - Paxos
- MySQL 8.0新特性 — 降序索引
- TRTC横竖屏切换2,重力感应
- Elasticsearch 日志配置详解【技术创作101训练营】
- HashMap源码分析