Question

我正在尝试使用输入文本字段中的数据动态更新span标记。基本上我有一个文本字段，我希望能够在用户输入时抓取用户的输入并在字段下方的span标记中显示给用户。

代码：

<input id="profileurl" type="text">
<p class="url">http://www.randomsite.com/<span id="url-displayname">username</span></p>

JQuery的：

var username;

$('#profileurl').keyup(function(username);
$("#url-displayname").html(username);

在JS Fiddle中看到它：http://jsfiddle.net/pQ3j9/

我猜测keyup函数不是最好的方法。由于检查密钥将无法获取预填充或粘贴的表单输入。

理想情况下，有一些神奇的jQuery函数可以在检测到密钥时输出框中的任何信息，但如果该方法存在，我还没有找到它。

编辑：你们这些人真是太棒了。看起来.val（）就是那种神奇的方法。

第二个问题：您如何限制输入？查看修改后的jsfiddle，当用户输入像＆lt; hr＆gt;浏览器解释它并打破表单。你指定一个数组然后检查吗？ jquery有没有类似PHP的strip_tags函数？

Answer 1

$('#profileurl').keyup(function(e) {
    $("#url-displayname").html($(this).val());
}).keypress(function(e) {
    return /[a-z0-9.-]/i.test(String.fromCharCode(e.which));
});

查看修改过的jsfiddle：
http://jsfiddle.net/roberkules/pQ3j9/5/

更新：正如@GregL指出的那样，keyup确实更好，（否则例如根本不处理退格）。

Answer 2

与roberkules的答案类似，但使用keyup()之类的建议似乎对基于Chrome浏览器的浏览器效果更好：

$('#profileurl').keyup(function(e) {
    $("#url-displayname").html($(this).val());
});

更新了jsFiddle：http://jsfiddle.net/pQ3j9/3/

Answer 3

对于第二个问题，如果您希望维护字符而不将它们解析为html实体，那么您应该这样做：

$('#profileurl').keyup(function(key) {
    $("#url-displayname").text($(this).val());
});

请查看 - http://jsfiddle.net/dhruvasagar/pQ3j9/6/

Answer 4

您可以使用bind

绑定多个事件

http://jsfiddle.net/dwick/DszV9/

在用户输入时抓取文本输入

4 个答案: