使用键盘事件(keypress)对输入框(input)做输入限制

需求

为避免用户输入非法数据,希望能对某些输入框的输入做限制。这里用价格输入框(只允许输入最多2位小数的非负数值)来做例子:

1
<input type="text" id="price" name="price" placeholder="请输入价格(最多2位小数)" required>

键盘事件处理代码(javascript)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//用了jQuery
$(function(){
//事件绑定
$('#price').keypress(onPriceKeypress).keyup(onPriceKeyup);
//按键处理
function onPriceKeypress(e){
var allowKeys = '0123456789+.';//只允许输入这些字符
var keyCode = e.which;//键盘输入的字符码

if (code<32 || (code>126 && code<160)){
//在有些浏览器(如Firefox)下控制字符也会触发该事件
return true;//允许输入控制字符,如退格、删除、tab等键
}
if (allowKeys.indexOf(String.fromCharCode(code))<0){//若是不允许的字符
return false;//禁止输入
}
return true;
}
//起键处理
function onPriceKeyup(e){
var $ipt = $(this), val = $ipt.val();//取当前值
if (!/^[+\d]?\d*\.?\d{0,2}$/.test(val)){//若当前值不是合法价格
$ipt.val(/[+\d]?\d*\.?\d{0,2}/.exec(val));//去除不合法的内容
}
}
}

注:

  1. 只在input使用pattern属性(如:pattern="[+\d]?\d*\.?\d{0,2}")只能限制最后的结果,不能限制输入不当的字符。
  2. 把input的type设为number可限制只能输入数字,但无法输入小数。
  3. 在有些浏览器(如Firefox)下控制字符也会触发keypress事件,待textinput事件普及后改用该事件就不用做特殊处理了。

使用electron开发桌面应用(笔记)

开发环境

  • nodejs + npm/cnpm
    1
    安装node
  • electron
  • 开发工具
    • atom

      第三方(vendors)

  • jQuery
  • Bootstrap
  • Nedb

Q&A

  • 如何防止用户重复打开应用?
  • 执行Nedb操作有时无响应(callback不被调用)?
    • 上一次操作参数有误导致后面的操作都被挂起(参看BUG)
  • 路径问题:相对路径 v.s. 绝对路径?数据文件路径?
    • 界面(ui组件)载入使用相路径(相对于对于起始页index.html)
    • 业务(mdl&&dao)对象require使用绝对路径(appPath+对象.js)
    • 数据文件存放在userData路径下:app.getPath(‘userData’)