Javascript 输入域中的可持续文本_Javascript_Jquery_Html_Input

Javascript 输入域中的可持续文本

javascript jquery html input

Javascript 输入域中的可持续文本,javascript,jquery,html,input,Javascript,Jquery,Html,Input,我有一个输入文本字段，里面有一个占位符。当我点击输入时，占位符消失了。我正在为这个占位符使用jQuery水印插件。我想改变这种行为。当用户在此字段中键入时，我需要该占位符保留在输入中很好的例子是电子邮件字段。在一个步骤中，用户给我域名，例如“foo.com”。电子邮件的占位符看起来像'@foo.com'。当用户单击此字段时，我希望此占位符的行为类似于该输入的值，但不可更改。“我的电子邮件”输入字段的默认值为“@foo.com”，当用户在“栏”中键入时bar@foo.com" 我希望你能理解我的

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

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

我希望你能理解我的意图：）我如何才能做到这一点？

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


@foo.com

您可以使用此功能。我在代码中使用过一次（在stackoverflow的帮助下）：

html:

在那之后，会假定每个人都是

@foo.com

，或者许多人必须将光标移过

才能更改他们的服务吗？我不希望@foo.com被更改，当用户单击输入时，光标应该在@之前。foo.com是不可更改的。我认为这会导致可用性问题；即使在技术上可能，它也可能导致混淆，用户应该清楚@foo.com是不可更改的。我认为把它作为普通文本放在文本框外会更好、更透明。我很无聊。应该是这样的。如果它不这样做，就像Cravo说的那样，它可能会让用户感到困惑。使用一个文本字段，在它的右边有一个静态的

@foo.com

标签。不要试图在一个文本字段中完成这一切，它会看起来很糟糕，工作非常糟糕，并且会让所有试图使用它的人感到困惑。可以改进：如果我正确理解OP的要求，使用ctrl+a选择所有文本不应该选择foo.com。这个解决方案很好，但它不是我想要的。在这种情况下，“@foo.com”仍然可以通过删除键删除，并单击输入产生不良结果，然后检查文本框的模糊事件，如果@foo.com不存在，请在末尾添加一个。感谢这位伙伴，这并不完全是我想要的，但它帮助了我：）我采用了您的解决方案并添加了javascript，当用户输入新字符时，标签将向左移动。我将字体设置为等距字体，这样可以轻松增加位置：）

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

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);
});