表单元素之输入系

输入系的元素主要是说input[type=text],input[type=password],textarea这三种元素. 通常第一个输入用户名,第二个输入密码,第三个输入详细消息.

它们都表现为一个凹入的框框,里面可以让用户输入内容,不同的是输入域只能输入一条, 输入区可以输入多行,密码域使用圆点来遮掩用户的输入.

由于是一个框框,它就存在焦点获得与失去的时机, 还有输入法切换的时机, 于是衍生了一大堆事件.

首先是focus, blur事件, 其次是keydown, keyup, keypress事件, 然后是针对输入内容的监听事件, input是每添加或删除一个字符时触发, change是所有内容输入好,用户点击页面其他元素,让当前表单元素失去焦点时触发! 从IE9开始,添加了compositionstart,compositionupdate,compositionend用来监听用户切换输入法. 因此像中文,我们用五笔或拼音敲了好几下,才生成一个中文,没有这监听,我们恰恰好为元素添加了maxlength属性时,可能输入不了内容.

有关输入法监听事件的更详细的认识,可以看这篇文章《经验总结：应对中文输入法的字符串截断方案》

因此输入系表单元素主要纠缠在用什么事件上，前面几个事件还好办，难点是输入法监听事件，这个特别难兼容，目前我在facebook的react库中有发现兼容处理

https://github.com/facebook/react/blob/master/src/renderers/dom/client/eventPlugins/BeforeInputEventPlugin.js#L175

但这个很难抽取出来，并且在各浏览器中的表现也不太好，详见这文章：

DOM COMPOSITION EVENTS COMPATIBILITY NOTES

那么剩下能处理的事件就是oninput。oninput也是IE9才支持的事件，在IE6-8中，拥有一个无敌能监听所有属性变动的事件onpropertychange事件。

if(!/null|function/(typeof el.oninput)){
el.attachEvent("onpropertychange", function(e){
if(e.propertyName === "value"){
//这里写input事件的罗辑
}
})
}

但这个也不完美，在avalon源码中，兼容input事件涉及更多东西， 大家可以用这个jquery插件实现相应的功能。

jquery.inputevent

此外，输入系表单元素还有一个其他元素没有东西——光标

默认光标总在我们输入内容的后面，但等我们用程序直接对input.value赋值时，光标位置就会丢失。

function getCaret(ctrl) {
var start = NaN, end = NaN
if (ctrl.setSelectionRange) {
start = ctrl.selectionStart
end = ctrl.selectionEnd
} else if (document.selection && document.selection.createRange) {
var range = document.selection.createRange()
start = 0 - range.duplicate().moveStart('character', -100000)
end = start + range.text.length
}
return {
start: start,
end: end
}
}

function setCaret(ctrl, begin, end) {
if (!ctrl.value || ctrl.readOnly)
return
if (ctrl.createTextRange) {//IE6-8
var range = ctrl.createTextRange()
range.collapse(true)
range.moveStart("character", begin)
range.moveEnd('character', end - begin);
range.select()
} else {
ctrl.selectionStart = begin
ctrl.selectionEnd = Math.min(end, ctrl.value.length)
}
}

此外光标的高度可能也受字体影响，可以看这篇文章处理一下。

关于调整input里面的输入光标大小