0

アプリケーションの入力ボックスにプレースホルダーを使用しており、プレースホルダーをサポートしていないブラウザーにはjqueryの回避策を使用しています。ただし、ほとんどのブラウザでは、入力が空であっても、入力にフォーカスがあるとプレースホルダーが消えます。回避策の1つは、入力フィールドに透明なbgを使用し、入力フィールドのすぐ後ろにテキストを含むスパンを配置し、何かを入力したらbgを不透明に変更することです。問題は、アプリケーションに3000を超える入力フィールドがあることです。実行時にjqueryプラグインを介してこれを行うことは可能ですか？または私はより良い提案を受け入れています。助けてください。

4

3 に答える 3

1

同じページに3000の入力フィールドがありますか？その場合は、なんらかの方法でアプリケーションを再設計する必要があります。

多数のページにさまざまな入力があり、プラグインが必要に応じてプレースホルダーを自動的に生成するようにしたい場合は、このための優れたプラグインがいくつかあります。ポリフィルの包括的なリストを次に示します。「Webフォーム：入力プレースホルダー」ヘッダーを探してください。https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

それらのほとんどは、インスタンスごとに特別に呼び出す必要がないため、3000行のコードを変更する必要はありません。:)

于 2012-07-24T07:49:36.347 に答える
0

代わりにvalueattrを使用しますが、ロジックは次のようになります。

var input = document.createElement('input');
if(! ('placeholder' in input))
{
    $("input[placeholder]").focus(/* clear value if it is equals placeholder */);
    $("input[placeholder]").blur(/* assign placeholder if it is "" */);
    $("input[placeholder]").each(/* assign placeholder if value equals "" */)
}

フォーカスのある入力のスタイル（またはクラス）を変更してぼかし、より多くのプレースホルダーのように見せることもできます。

于 2012-07-24T15:27:25.700 に答える
0

これは私が書いたものであり、使用しています：

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
body{
    background-color:#DDD;
}

span.placeholder
{
    background-color:#FFF;
    color:#777;
    border-radius: 4px 4px 4px 4px;
    margin: 5px 0;
    padding: 9px 0 8px 13px;
    width: 297px;

}
input
{
    border: 1px solid #707A68;
    border-radius: 4px 4px 4px 4px;
    margin: 5px 0;
    padding: 10px;
    width: 310px;
    background:transparent;
}

</style>

<body>
<div>
    <input type="text" placeholder="hello" name="hh"/>
</div>
</body>

<script>
$('input').each(function(){

    var txt = $(this).attr('placeholder');
    var name = $(this).attr('name');
    var node = $("<span class='placeholder'>"+txt+"</span>").appendTo($(this).parent());
    $(this).before(node);
    node.css('position','absolute');
    node.css('z-index','-1');
    node.css('display','block');
    $(this).attr('placeholder','');
});
$('input').bind('keyup',function(){
    if($(this).val()=="")
        $(this).css('background','transparent');
    else
        $(this).css('background','#FFF');
});
</script>
于 2012-07-25T18:06:02.313 に答える