-1

サポートしていないブラウザーの chrome/firefox のデフォルト プレースホルダーのように機能する jQuery プレースホルダーを作成していますが、プレースホルダー 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

0

これを試して。

html を追加する代わりに、div を非表示にしてみてください。あなたの満足を叶えるかもしれません

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