原文来自:
Simple Tricks for More Usable Forms
1.打开页面某表单元素即获得焦点,甭使用 onload,其他脚本可能也需要。使用这样的代码
addEvent(window, 'load', function() { document.getElementById('myfield').focus() });
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false; } }
2.使用 label,还可以给label 加上 cursor:poiter 样式。
3.给用户一些提示信息,比如
IE不行,需要js处理。
addEvent(window, 'load', function() {
var input, textarea;
var inputs = document.getElementsByTagName('input');
for (var i = 0; (input = inputs[i]); i++) {
addEvent(input, ‘focus’, oninputfocus);
addEvent(input, ‘blur’, oninputblur);
}
var textareas = document.getElementsByTagName(’textarea’);
for (var i = 0; (textarea = textareas[i]); i++) {
addEvent(textarea, ‘focus’, oninputfocus);
addEvent(textarea, ‘blur’, oninputblur); }
});
function oninputfocus(e) {
/* Cookie [9]-cutter code to find the source of the event */
if (typeof e == ‘undefined’) {
var e = window.event;
}
var source;
if (typeof e.target != ‘undefined’) {
source = e.target;
} else if (typeof e.srcElement != ‘undefined’) {
source = e.srcElement;
} else {
return;
}
/* End cookie-cutter code */
source.style.border=’2px solid #000′;
}
function oninputblur(e) { /* Cookie-cutter code to find the source of the event */
if (typeof e == ‘undefined’) {
var e = window.event;
}
var source;
if (typeof e.target != ‘undefined’) {
source = e.target;
} else if (typeof e.srcElement != ‘undefined’) {
source = e.srcElement;
} else {
return;
}
/* End cookie-cutter code */
source.style.border=’2px solid #ccc’;
}
4.其他小玩意,比如
onfocus=”this.select()”
onkeyup=”document.title = ‘New item: ‘ + this.value”
等,这段正则有意思(空格环成下划线)
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
5.表单验证…
Leave a reply