动手写个数字输入框2:起手式——拦截非法字符
时间:2022-04-22
本文章向大家介绍动手写个数字输入框2:起手式——拦截非法字符,主要内容包括前言、从源头抓起——拦截非法字符、扩大非法字符集、预判断、附录:工具函数、总结、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
前言
最近在用Polymer封装纯数字的输入框,开发过程中发现不是坑,也有不少值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历:
- 《动手写个数字输入框1:input[type=number]的遗憾》
- 《动手写个数字输入框2:起手式——拦截非法字符》
- 《动手写个数字输入框3:痛点——输入法是个魔鬼》
- 《动手写个数字输入框4:魔鬼在细节——打磨光标位置》
从源头抓起——拦截非法字符
从《动手写个数字输入框1:input[type=number]的遗憾》中我们了解到input[type=number]
基本不能满足我们的需求,为了简单化我们就直接在input[type=text]
上加工出自己的数字输入框吧。
首先很明确的一点是最终数值可以包含以下字符[+-0-9.]
,而可输入的功能键为Backspace
,Delete
,Arrow-Left
,Arrow-Right
,Arrow-Up
,Arrow-Down
和Tab
。
于是我们可以设置如下规则了
// 断言库
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)
, isMinus = anyPass(eq(109), eq(189))
, isDot = anyPass(eq(110), eq(190))
, isDigit = anyPass(
allPass(lte(49), gte(57))
, allPass(lte(96), gte(105)))
, isPlus = anyPass(
comp(eq(107), keyCode)
, allPass(
prop('shiftKey')
, comp(eq(187), keyCode)))
const isValid = anyPass(
comp(
anyPass(isBackspace, isDelete, isArrowLeft
, isArrowLeft, isArrowUp, isArrowDown
, isTab, isMinus, isDot, isDigit)
, keyCode)
, isPlus)
$('input[type=text]').addEventListener('keydown', e => {
if (!isValid(e)){
e.preventDefault()
}
})
扩大非法字符集
还记得min,max,precision吗?
- 当min大于等于0时,负号应该被纳入非法字符;
- 当max小于0时,正号应该被纳入非法字符;
- 当precision为0时,小数点应该被纳入非法字符。于是我们添加如下规则,并修改一下
isValid
就好了
// 获取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)
const lensTargetMin = lcomp(lensTarget, lensMin)
, lensTargetMax = lcomp(lensTarget, lensMax)
, lensTargetPrecision = lcomp(lensTarget, lensPrecision)
const isValid = anyPass(
comp(
anyPass(isBackspace, isDelete, isArrowLeft
, isArrowLeft, isArrowUp, isArrowDown
, isTab, isDigit)
, keyCode)
, allPass(
comp(gt(0), view(lensTargetMin))
, comp(isMinus, keyCode))
, allPass(
comp(lte(0), view(lensTargetMax))
, isPlus)
, allPass(
comp(lt(0), view(lensTargetPrecision))
, comp(isDot, keyCode)))
预判断
到这里为止我们已经成功地拦截了各种非法字符,也就是最终值必须之含[+-0-9.]
,但含这些字符跟整体符合数值格式就是两回事了。因此我们要继续补充下面两步,并且由于keydown事件触发时value值还没被修改,于是我们需要将value值和当前输入值做组合来做预判,进一步扩大非法字符集。
- 通过正则检查最终值是否符合格式要求(是否存在多个小数点也会在这一步处理掉);
- 检查最终值是否在
min
和max
范围内。
const isValidStr = precision =>
a => RegExp("^[+-]?[0-9]*"+ (precision ? "(\.[0-9]{0," + precision + "})?" : "") + "$").test(a)
const lensValue = lens(a => a.value)
, lensTargetValue = lcomp(lensTarget, lensValue)
$('input[type=text]').addEventListener('keydown', e => {
var prevented = true
// 拦截非法字符
if (isValid(e)){
prevented = false
// 预判断
if (anyPass(comp(anyPass(isMinus, isDigit, isDot), keyCode), isPlus)(e)){
var str = view(lensTargetValue)(e) + prop('key')(e)
// 预判断格式
prevented = !isValidStr(view(lensTargetPrecision)(e))(str)
// 预判断值范围
if (!prevented){
if (str == '-') str = '-0'
if (str == '+') str = '0'
if (str == '.') str = '0'
prevented = !allPass(
gte(view(lensTargetMax)(e))
, lte(view(lensTargetMin)(e)))(Number(str))
}
}
}
if (prevented){
e.preventDefault()
}
})
附录:工具函数
// 工具函数,请无视我吧: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) => ({ getter: a => lenses.reduce((accu, lens) => accu && lens.getter(accu), a)})
const view = l => a => l.getter(a)
const $ = invoker(1, document, "querySelector")
const attr = (o, a) => invoker(1, o, 'getAttribute')(a)
总结
现在可以终于可以牢牢控制住用户输入了,直到用户切换到IME为止:-<当使用IME输入时会发现上述措施一点用也没有,不用皱眉了,后面我们会一起把IME KO掉!
- Android WebView 上传文件支持全解析
- 网站管理软件 – AspxSpy2014 Final
- 特性分支与特性开关哪家强?
- Android快速开发框架 roboguice
- 悄悄的干活,打枪的不要!勒索+比特币挖矿木马
- 拥有可移动头像的折叠Android工具栏:CollapsingAvatarToolbar
- Android平台下的第一个Tor木马
- 利用代码实现自定义圆角+阴影按钮 android-flat-button
- 周末阅读:程序员的《权利法案》
- 对利用Adobe 0day – CVE-2014-0502进行攻击的行为分析
- Android系统更改状态栏字体颜色
- Android实现竖着的滑动刻度尺效果,选择身高(竖向的)
- DedeCMS全版本通杀SQL注入漏洞利用代码及工具
- Android实现滑动刻度尺效果,选择身高体重和生日
- 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 数组属性和方法
- 如何表示python中的相对路径
- 基于Tensorflow读取MNIST数据集时网络超时的解决方式
- python中的错误如何查看
- python实现斗地主分牌洗牌
- Python Mock模块原理及使用方法详解
- python实现猜数游戏(保存游戏记录)
- PHP实现简单计算器小程序
- PHP单例模式模拟Java Bean实现方法示例
- php实现每日签到功能
- laravel5实现微信第三方登录功能
- Laravel框架定时任务2种实现方式示例
- tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
- Python 基于jwt实现认证机制流程解析
- Keras – GPU ID 和显存占用设定步骤
- PHP中如何使用Redis接管文件存储Session详解