Question

我正在创建一个jQuery占位符，对于不支持的浏览器，就像chrome / firefox默认占位符一样，但我不能让placholder 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>

Answer 1

我不确定它是否会使产生很大差异，但我做了一些小改动，使用keydown代替keypress，并且在视觉上看起来与默认行为无法区分：

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

Answer 2

试试这个。

尝试隐藏div，而不是追加html。它可能会让您满意

 if($('#txt').val().length > 0){
                    $('#ph').hide();
                } else {
                    $('#ph').show();
                }

使用jquery，输入值不会立即改变

2 个答案: