我正在创建一个 jQuery 占位符,其作用类似于不支持的浏览器的 chrome/firefox 默认占位符,但我无法让占位符 div 的 html 的更改速度与 chrome/firefox 的默认占位符更改的速度一样快。仅当我松开按键或按下按键时它才会改变,它只会在输入中至少有 2 个字符时才会改变。我怎样才能解决这个问题?
<html>
<head>
<title>Place Holder</title>
<style media="screen" type="text/css">
input{
position:absolute;
top:4px;
left:4px;
background:transparent;
}
#default{
top:30px;
}
#ph{
color:LightGray;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function() {
$("#txt")
.keypress(function(){
if($('#txt').val().length > 0){
$('#ph').html('');
} else {
$('#ph').html('Custom Place Holder');
}
})
.keyup(function() {
if($('#txt').val().length > 0){
$('#ph').html('');
} else {
$('#ph').html('Custom Place Holder');
}
});
}
</script>
</head>
<body>
<div id="ph">Custom Place Holder</div>
<input id="txt" type="text" />
<input id="default" type="text" placeholder="Default Placeholder"/>
</body>
</html>