如何使用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