以用戶類型抓取文本輸入

我正嘗試使用輸入文本字段中的數據即時更新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

以用戶類型抓取文本輸入

回答

相關問題