3

我有输入文本字段，里面有一个占位符。当我单击输入时，占位符消失。我正在为这个占位符使用 jQuery Watermark 插件。我想改变这种行为。当用户在此字段中键入时，我需要该占位符留在输入中。

很好的例子是电子邮件字段。在一个步骤中，用户给了我域名，例如“foo.com”。电子邮件的占位符看起来像“@foo.com”。当用户单击此字段时，我希望此占位符充当该输入的值，但不可更改。我的电子邮件输入字段的默认值为“@foo.com”，当用户在“bar”中键入它的“bar@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 回答