Question

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

很好的例子是电子邮件领域。在一个步骤中，用户给我域名，例如'foo.com'。电子邮件的占位符看起来像'@ foo.com'。当用户单击此字段时，我希望此占位符的行为类似于该输入的值，但不可更改。当用户在'bar'中输入'bar@foo.com'时，我的电子邮件输入字段的默认值为'@ foo.com'。

我希望你明白我要做的事情:)我怎样才能实现这种行为？

Answer 1

你可以为此设置一个绝对定位的标签。此外，您可以在输入上处理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>

Answer 2

您可以使用此功能。我在我的代码中使用过一次（在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);
});

输入领域的可持续文本

2 个答案: