在用户键入时抓取文本输入答案

【问题标题】：Grab text input as the user types在用户键入时抓取文本输入
【发布时间】：2011-09-16 00:13:43
【问题描述】：

我正在尝试使用输入文本字段中的数据即时更新 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，当用户输入像这样的 html 标记时，浏览器会对其进行解释并破坏表单。您是否指定了一个数组，然后对其进行检查？ jquery 有没有类似 PHP 的 strip_tags 函数？

【问题讨论】：

标签： javascript jquery html textinput

【解决方案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 确实更好，（否则根本不处理退格）。

【讨论】：

这太棒了！这些解决方案的简单性是惊人的。第二个问题，如果可以的话，您将如何限制输入以使用户无法使用随机样式或 html 代码破坏布局？
查看更新后的演示 @jsfiddle.net/roberkules/pQ3j9/5，它只允许使用正则表达式的 a-Z、0-9、.、-。
第二个语句的keypress而不是keyup有什么特别的原因吗？
感谢您抽出宝贵时间。很棒的解决方案。不知道javascript会用正则表达式解析。我也想允许下划线，所以我像这样修改了正则表达式： return /[a-z0-9.-_]/i.test(String.fromCharCode(e.which));

【解决方案2】：

类似于 roberkules 的回答，但像您建议的那样使用 keyup() 在基于 Chrome 的浏览器中对我来说似乎效果更好：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

您可以使用bind绑定多个事件

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

【讨论】：