JS控制输入框以红色作为验证提示，遇到两个问题：
- select标签和input标签有区别
- focus后变红再恢复时，不好恢复到之前的带有阴影的蓝边框
解决方案：
- 第一种写法
function focusChangeBorder( id ) {
var editElem = $("#" + id);
if (editElem.children("#" + id).length>0) {
editElem = editElem.children("#" + id);
}
editElem.blur(function () {
$(this).css({
'outline': '5px auto -webkit-focus-ring-color',
'border-color': 'rgba(82, 168, 236, 0.8)'
});
$(this).css({
'outline': 'none',
'border-color': '#ccc'
});
}).focus(function () {
$(this).css({
'outline': 'none',
'border-color': 'rgba(255, 0, 0, 0.8)'
});
});
editElem.focus();
}
- 第二种写法
var focusChangeBorder = function ( id ) {
//var elem = $( "input#" + id );
//if (elem.length <= 0) {
// elem = $("#" + id);
//}
var elem = $( "input,select,option,textarea" ).filter( '#' + id );
elem.blur( function () {
elem.focus( function () {
$( this ).css( {
'outline': '5px auto -webkit-focus-ring-color',
'border-color': 'rgba(82, 168, 236, 0.8)'
} );
} );
$( this ).css( {
'outline': 'none',
'border-color': '#ccc'
} );
} ).focus( function () {
$( this ).css( {
'outline': 'none',
'border-color': 'rgba(255, 0, 0, 0.8)'
} );
} );
elem.focus();
}
