以用户类型抓取文本输入

我正尝试使用输入文本字段中的数据即时更新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小提琴：http://jsfiddle.net/pQ3j9/

我猜KEYUP功能是不是要做到这一点的最好办法。由于检查密钥将无法获取预填充或粘贴的表单输入。

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

编辑：你们很惊人。它看起来像.val（）是那种神奇的方法。

第二个问题：您将如何限制输入？查看修改后的jsfiddle，当用户输入一个html标签，如< hr>浏览器解释它并打破表单。你指定一个数组然后检查它吗？ jquery是否有类似PHP的strip_tags函数？

来源

2011-06-16 Zaqx

$('#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确实比较好，（否则例如退格都没有得到处理）。

来源

2011-06-16 01:35:42 roberkules

这是完全真棒！这些解决方案的简单性令人惊叹。第二个问题，如果我可以，你将如何去限制输入，以便用户不能用随机样式或html代码破坏布局？ – Zaqx 2011-06-16 01:54:45

查看更新的demo @ http://jsfiddle.net/roberkules/pQ3j9/5/，它只允许使用正则表达式的'a-Z'，'0-9'，'.'，'-'。 – roberkules 2011-06-16 02:00:39

为什么按键和第二条语句没有键入的特定原因？ – Zaqx 2011-06-16 20:26:01

可以绑定多个事件与bind

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

来源

2011-06-16 01:37:50

到roberkules'答案相似，但使用keyup()像你这样的建议似乎在基于Chrome的浏览器更好地为我工作：

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

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

来源

2011-06-16 01:40:02 GregL

对于第二段estion，如果你希望保持字符，而不是让他们解析为html实体，那么你应该这样做，而不是：

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

瞧瞧吧 - http://jsfiddle.net/dhruvasagar/pQ3j9/6/

来源

2011-06-16 02:15:38

以用户类型抓取文本输入

回答

相关问题