如何使用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解决方案。但是我不能使用正确的关键字进行搜索,因为我找不到。任何人有想法?
不知道如何将它添加到文本框(所以它不可移动),但您可以在调用文本框的值时添加前缀。 例如:
<input type = 'text' id = 'inputID' />
<script type = 'text/javascript'>
var MyVar = document.getElementById('inputID').value;
var finalVar = "prefix_" + MyVar;
MyVar.value = finalVar;
</script>
其附加到“点击功能”或“的onkeydown”功能
你可以在提交的文本框前面加上前缀。像这样,您不必处理尝试删除前缀的用户。
$('#submitbutton').click(function{
var valueiwant = "myprefix "+$('#textfield').val();
});
希望这有助于
这将处理保持前缀永久:
$('#field').keyup(function() {
var prefix = 'string'
if (this.value.substring(0, prefix.length) != prefix){
$(this).val(prefix)
}
});
需要将其绑定到'.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);
}
});
});
我不知道这是否可行,因为我可以使用鼠标将光标放在开头,当我输入“Q”时,我会在框中看到“some prefixQsome prefix”。 – 2012-02-27 16:34:30
这与Matt Cofer的答案具有相同的错误 - 删除单个字符,整个前缀再加上前缀修饰前缀。 – 2012-02-27 16:34:35
试试这个:(尼古拉Peluchetti的答案稍作修改)
没有努力挽留用户的输入,如果他们惹前缀:
试图留住用户的输入:
如果我从前缀的末尾删除单个字符,则会得到几乎双倍的前缀('prefix_' - >'prefix_prefix') – 2012-02-27 16:33:14
如果在执行其他任何操作前按下退格键,则会获得“prefix_prefix”。我真的希望已经有一个插件正在使用,但无法通过搜索文本框前缀和文本框前缀来找到它。 – 2012-02-27 16:36:02
啊,很好。这是有缺陷的。尽管这是一个开始。至少它也考虑到了对模糊的约束。 – 2012-02-27 16:38:44
我已经考虑过这一点,但我希望用户知道他们输入的内容不是存储的内容。现在我只在文本框的左侧有一个前缀作为标签,但我想改进它。 – 2012-02-27 16:32:38
考虑到其他答案的优点和缺点,这可能是最好的解决方案...如果您正确使用标签(工具提示等),那么用户将知道他们输入的内容将会得到一个前缀。 – 2012-02-27 16:45:02