使用IE浏览器在输入框输入内容后,输入框后边会出现一个小叉子,点击后可以清除输入框内容,而谷歌浏览器的输入框并没有这个功能,使用jQuery让谷歌浏览器的输入框也有这个清除内容的小叉子。
$(document).ready(function(){
if ($("style[id='mycssSrz']").length == 0) {
var mycssSrz = '<style id="mycssSrz">.srz_input_clear{background-image:url(\'../images/public/clearInput.png\');cursor:pointer;background-repeat:no-repeat;background-position:right;background-clip: padding-box;}';
$("head").append(mycssSrz);
}
$("input[type='text']").bind("focus change keydown propertychange input",function(){
if ($(this).val() != "") {
$(this).addClass("srz_input_clear");
$(this).bind("click",function(e){
doClearOnBind($(this),e);
});
} else {
$(this).removeClass("srz_input_clear");
}
}).bind("blur",function(){
$(this).removeClass("srz_input_clear");
});
});
function doClearOnBind (obj,e) {
var moPosition = e.pageX - $(obj).position().left;
if ((moPosition ) > $(obj).width()) {
$(obj).val("");
$(obj).removeClass("srz_input_clear");
}
}