如何使用Jquery将永久前缀添加到文本框

我想为文本框添加一个水印变体。但我不想让水印消失。我希望它像一个无法打字或删除的前缀。我不想使用HTML/CSS的解决方案，如：如何使用Jquery将永久前缀添加到文本框

<div style="border: solid 1px black; width:250px;"> 
    <label style="border:none;">prefix_</label> 
    <input type="text" style="border:none;"/> 
</div>

我连想提交的文本框的值的一部分的前缀。我想要一个jQuery解决方案。但是我不能使用正确的关键字进行搜索，因为我找不到。任何人有想法？

来源

2012-02-27 Shawn Doe

不知道如何将它添加到文本框（所以它不可移动），但您可以在调用文本框的值时添加前缀。例如：

<input type = 'text' id = 'inputID' /> 

<script type = 'text/javascript'> 
    var MyVar = document.getElementById('inputID').value; 
    var finalVar = "prefix_" + MyVar; 
    MyVar.value = finalVar; 
</script>

其附加到“点击功能”或“的onkeydown”功能

来源

2012-02-27 16:08:50 CKKiller

你可以在提交的文本框前面加上前缀。像这样，您不必处理尝试删除前缀的用户。

$('#submitbutton').click(function{ 
    var valueiwant = "myprefix "+$('#textfield').val(); 
});

希望这有助于

来源

2012-02-27 16:10:39

我已经考虑过这一点，但我希望用户知道他们输入的内容不是存储的内容。现在我只在文本框的左侧有一个前缀作为标签，但我想改进它。 – 2012-02-27 16:32:38

考虑到其他答案的优点和缺点，这可能是最好的解决方案...如果您正确使用标签（工具提示等），那么用户将知道他们输入的内容将会得到一个前缀。 – 2012-02-27 16:45:02

这将处理保持前缀永久：

$('#field').keyup(function() { 
    var prefix = 'string' 
    if (this.value.substring(0, prefix.length) != prefix){ 
    $(this).val(prefix) 
    } 
});

来源

2012-02-27 16:14:52

需要将其绑定到'.onblur（）'以防止鼠标粘贴在前缀上的能力... – 2012-02-27 16:36:25

这似乎很接近。我仍然可以使用home或鼠标来更改我的光标位置并更改前缀，但不会保留更改。我希望可以改进这种行为，以便实际上忽略这些更改，而不是完成然后撤消。 – 2012-02-27 16:40:46

@ShawnDoe不认为这是可能的 - 你可以绑定到'.ydydown'，但没有什么（我知道）阻止输入的字符... – 2012-02-27 16:52:14

这里是我的jQuery的尝试：http://jsfiddle.net/5n6WF/

$(function() { 
    $('#field').val($('#field').data('prefix')); 

    original_value = $('#field').val(); 

    $('#field').keyup(function() { 
     var f  = $(this), 
      prefix = f.data('prefix'), 
      rx  = new RegExp('^' + escape(prefix)); 

     new_value = prefix + unescape(escape(f.val()).replace(rx, '')); 

     if (original_value != new_value) { 
      original_value = new_value; 
      f.val(new_value); 
     } 
    }); 
});

来源

2012-02-27 16:16:10 deefour

我不知道这是否可行，因为我可以使用鼠标将光标放在开头，当我输入“Q”时，我会在框中看到“some prefixQsome prefix”。 – 2012-02-27 16:34:30

这与Matt Cofer的答案具有相同的错误 - 删除单个字符，整个前缀再加上前缀修饰前缀。 – 2012-02-27 16:34:35