4

html5 プレースホルダーを使用した入力ボックスがあります。

<input type="text" name="website" class="url" required placeholder="enter website">

jQuery またはストレートな JavaScript を使用して、フォーカスのあるユーザーが入力するデータの先頭に文字列を追加したいと考えました。フィールドに事前設定された文字列変数 (例: http://example.com )よりも多くのデータが含まれている場合、フィールドは私の要件を満たしています。元の文字列 ('http://') のみが含まれている場合は、入力値をクリアしてプレースホルダーを表示します。

次のコードは私にとってはうまくいきます。

var input = $("#processor .url");
var prefix = 'http://';

input.focus(function() {
    if (input.val().indexOf(prefix) == -1) {
        input.val(prefix + input.val());
    }
}).blur(function() {
    if (input.val() == prefix) {
        input.val('');
    }
});

パフォーマンスなどのためにこれを書くより良い方法はありますか...、私の本当の質問ですか?

4

1 に答える 1

-1

これは実際に見えるよりも簡単です。@Tahir Yasin のコメントに基づいてデモを作成しました。

CSS:

.grey { color:#aaa; }

html:

<input type="text" />

jQuery:

var inputval = "";
$(document).ready(function() {
    // Define your default value to show on input
    $("input[type='text']").val("Enter your link here...");
    // Add grey color or optionally blur effect
    $("input[type='text']").addClass('grey');
    // Save your default value
    inputval = $("input[type='text']").val();
    $("input[type='text']").focusin(function() {
    // if textbox is empty or got the default value
    if ($(this).val() == "" || $(this).val() == inputval) {
        // Clear the box
        $(this).val("http://"); // Your text here..
        // Remove grey color
        $(this).removeClass('grey'); }
    }).focusout(function() {
        // if textbox is empty or just contains your value
        if ($(this).val() == "" || $(this).val() == "http://" ) {
            // Put your Default value back
            $(this).val(inputval);
            // Add grey color
            $(this).addClass('grey'); }
    });
});

フィドル: http://jsfiddle.net/BerkerYuceer/TgZ8L/

アクションのすべてのステップで jQuery を使用するのが好きです。しかし、私のコードがあなたのコードよりもパフォーマンスが低いことがわかるように、あなたはすでに最もパフォーマンスの高い方法を使用しています。

ここにあなたのコードに基づくデモがあります: http://jsfiddle.net/BerkerYuceer/qbLyD/

自分で違いを確認できますが、ほぼ同じですが、明らかにコードの方が高速です。

于 2012-11-21T07:53:26.433 に答える