-1

我正在创建一个 jQuery 占位符，其作用类似于不支持的浏览器的 chrome/firefox 默认占位符，但我无法让占位符 div 的 html 的更改速度与 chrome/firefox 的默认占位符更改的速度一样快。仅当我松开按键或按下按键时它才会改变，它只会在输入中至少有 2 个字符时才会改变。我怎样才能解决这个问题？

http://jsfiddle.net/HW7tK/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>
4

2 回答 2

1

我不确定它是否有那么大的不同，但我做了一个小的改变来keydown代替使用，keypress并且在视觉上看起来与默认行为没有什么区别：

http://jsfiddle.net/HW7tK/4/

于 2013-11-04T11:23:32.730 回答
0

尝试这个。

尝试隐藏 div，而不是附加 html。它可能会满足您的需求

 if($('#txt').val().length > 0){
                    $('#ph').hide();
                } else {
                    $('#ph').show();
                }
于 2013-11-04T11:24:10.420 回答