3

テキスト入力フィールドがあり、中にプレースホルダーがあります。入力をクリックすると、プレースホルダーが消えます。このプレースホルダーには jQuery Watermark プラグインを使用しています。この行動を変えたい。ユーザーがこのフィールドに入力するときにプレースホルダーを入力に残す必要があります。

良い例は、電子メールのフィールドです。1 つのステップで、ユーザーは「foo.com」などのドメイン名を教えてくれます。電子メールのプレースホルダーは「@foo.com」のようになります。ユーザーがこのフィールドをクリックすると、このプレースホルダーがその入力の値のように機能しますが、変更できません。ユーザーが「bar」に「bar@foo.com」と入力すると、電子メール入力フィールドのデフォルト値は「@foo.com」になります。

私がやろうとしていることを理解していただければ幸いです:)どうすればこの動作を実現できますか?

4

2 に答える 2

2

これには絶対位置のラベルを付けることができます。また、ラベルを非表示にする場合に備えて、入力の onclick および onblur イベントを処理できます。これを試して：

<html>
    <body>
        <form>
            <div style=" position:relative;z-index:1;">
                <label style="position:absolute; line-height:28px;text-align:left;left:150px;top:4px;overflow:hidden; height:28px;width:200px; z-index:2;color:#cacaca" for="email">@foo.com</label>
                <input type="text" value="" name="email" style="border:1px solid #939393; line-height:28px;text-align:left;font-size:14px;padding-left:5px;color:#000;z-index:1;width:300px;height:30px" />
            </div>
        </form>
    </body>
</html>
于 2012-08-20T12:20:11.187 に答える
1

この機能を使用できます。私は自分のコードで一度それを使用しました（stackoverflowの助けを借りて）：

html：

<input type="text" id="t1" placeholder="@foo.com">​

javascript：

function setRange(input, textStart, textEnd) {
    if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(textStart, textEnd);
    }
else if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', textEnd);
        range.moveStart('character', textStart);
        range.select();
    }
}
function setCursorPos (input, pos) {
    setRange(input, pos, pos);
}

$("#t1").click(function() {
    $(this).val("@foo.com");
    setCursorPos(document.getElementById("email"), 0);
});
于 2012-08-20T12:30:13.443 に答える