使用jQuery替換文本框與<textarea>某些字符長度

我使用下面的簡單代碼來替換文本框（<input type=text />）與<textarea>元素在用戶鍵入一定數量的字符後。在下面的例子中，這發生在第10個字符之後。代碼有效，但<textarea>的內容省略了用戶鍵入的第10個字符。例如，如果在文本框中鍵入「testing 1234」，textarea將省略「4」。有任何想法嗎？謝謝。 --Jake使用jQuery替換文本框與<textarea>某些字符長度

$('.info').keypress(function() { 
    var count = $(this).val().length; 
    if (count > 10) 
    { 
     var contents = $(this).val(); 
     $(this).after('<textarea></textarea>').next().val(contents).end().remove() 
    } 
})

更新：我試過很多的您共享的建議：使用keyup事件。它的工作原理，但只有當你輸入緩慢。如果你是一個快速的typer，就像我懷疑這裏大多數人會是，那麼在使用keyup事件時，第10個字符仍然被忽略。

來源

2010-11-11 jake

說真的，我只想用@ Neil的解決方案。這不會很難，它應該解決你所有的問題。 – 2010-11-11 14:54:56

如果您將某些東西粘貼到盒子中，我會選擇適用的解決方案。 – 2010-11-11 19:01:38

也許你應該從頭開始使用textarea，只增加「rows」屬性。我願意打賭你會在更改後保留所有角色，它的行爲完全像行=「1」的文本框。

$('.info').keypress(function() { 
    var count = this.value.length; 
    if (this.rows == 1 && count > 10) 
    { 
     this.rows = 4; // Or whatever you'd prefer. 
    } 
});

來源

2010-11-11 14:34:00 Neil

Ooo，這真是個好主意。直到我完成發佈我的想法後才發現它（帖子只相隔20秒！）。 :) – 2010-11-11 14:35:48

這絕對是一個選擇。如果我不知道如何去做我目前正在嘗試的，我肯定會採納你的建議。謝謝。 – jake 2010-11-11 14:50:15

我會在我的答案中添加代碼可能看起來像什麼。 – Neil 2010-11-11 14:52:58

更改事件keyup而不是keypress。

來源

2010-11-11 14:34:14 Stephen

鍵入不能解決問題。看到我上面的帖子的更新。不管怎麼說，還是要謝謝你。 – jake 2010-11-11 14:52:17

在這種情況下，請遵循Neil的建議。 – Stephen 2010-11-11 14:54:07

如何使用keyup而不是keypress？這會在鍵被釋放後觸發動作（並且鍵入了字符）。

來源

2010-11-11 14:34:20

鍵入不能解決問題。看到我上面的帖子的更新。不管怎麼說，還是要謝謝你。 – jake 2010-11-11 14:51:29

嘗試使用keyup事件

$('.info').keyup(function() { 
    var count = $(this).val().length; 
    if (count > 10) 
    { 
     var contents = $(this).val(); 
     $(this).after('<textarea></textarea>').next().val(contents).end().remove() 
    } 
})

來源

2010-11-11 14:35:02

鍵入不能解決問題。看到我上面的帖子的更新。不管怎麼說，還是要謝謝你。 – jake 2010-11-11 14:51:51

而不是使用按鍵時使用KEYUP的。這樣它就可以在發生文本區域更改之前插入對輸入數據的更改。

$('.info').keypress(function(e) {

5號線：這應該被丟棄

來源

2010-11-11 14:35:37 Brady

鍵入不能解決問題。看到我上面的帖子的更新。不管怎麼說，還是要謝謝你。 – jake 2010-11-11 14:54:02

1號線（注意參數）停止最後一個字符

var contents = $(this).val() + String.fromCharCode(e.keyCode);

來源

2010-11-11 14:35:39 pestaa

謝謝，這個伎倆。 :) – jake 2010-11-11 15:05:12

很高興聽到它，因爲我沒有測試代碼！但不要告訴任何人！ ;） – pestaa 2010-11-11 15:06:36

事實證明，這個修復程序在Chrome中不起作用。所以我換了一個不同的修復程序。不管怎麼說，還是要謝謝你。 – jake 2010-11-11 19:46:08

嘗試使用按鍵的KEYUP代替。但我認爲尼爾建議的是更好的方法。

來源

2010-11-11 14:35:45

鍵入不能解決問題。看到我上面的帖子的更新。不管怎麼說，還是要謝謝你。 – jake 2010-11-11 14:53:00

Neil's answer可能是最好的方法。但是，如果您想繼續使用textarea替換輸入，則可以使用jQuery的replaceWith()（在patrick_dw的現在已刪除的答案中建議），但是您應該避免使用類似鍵值的事件。

不久前我寫了一個插件，它將處理比keypress,keyup和事件更好的文本輸入。 HTML5 oninput事件旨在處理各種文本輸入，如粘貼，拖放和拼寫檢查更正等。My plug-in使此事件跨瀏覽器。

$('.info').input(function() { 
    var count = $(this).val().length; 
    if (count > 10) { 
     $(this).replaceWith('<textarea>', {value: this.value}); 
    } 
});

還有a blog post概述了爲什麼你不應該使用的關鍵事件來檢測輸入。

來源

2010-11-11 14:39:44

當您的功能處理事件時，角色尚未輸入到框中。查看傳遞給javascript函數的事件對象並追加觸發它的字符。

來源

2010-11-11 14:42:55

結合我和Andy E的建議。 keyup是錯誤的路要走。 replacewith也是一個好主意。 – 2010-11-11 14:44:24

使用jQuery替換文本框與<textarea>某些字符長度

回答

相關問題