如何在添加字母后進行替換？

Question

我有一個工作腳本來替換文本輸入中的非字母數字字母。如果你添加特殊的字符到文本輸入，它不會讓你添加到那裏。但是，我希望此腳本在添加該字母后刪除特殊字符，意味着您可以在那裏看到該字母，但在此之後它已被刪除（例如，當您嘗試在stackoverflow上對自己的問題進行upvote時）

$("#nick").on("keypress", function(event) { 


    var englishAlphabetAndWhiteSpace = /[A-Za-z]/g; 

    var key = String.fromCharCode(event.which); 

    if (event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39 || englishAlphabetAndWhiteSpace.test(key)) { 
     return true; 
    } 

    return false; 
}); 

這樣做的正確方法是什麼？

Answer 1

你要顯示的字母，然後將其刪除，請使用 'KEYUP' 事件

$('#test').on('keyup keypress', function(e) { 
    var reg = /[A-Za-z]/; 
    var value = $(this).val(); 
    if (value && !reg.test(value[value.length - 1])) { 
     $(this).val(value.slice(0, value.length - 1)); 
    } 
}) 

Code on jsfiddler

Answer 2

您可以使用正則表達式來替換輸入值中的所有非字母字符。

1. 使用HTML5上inputpattern屬性給正則表達式
2. 使用keyup和input事件處理程序，以捕獲事件
3. 使用否定階級正則表達式來刪除所有非字母符號
4. 使用setTimeout清除特殊延遲後的字符

var timeout; 
 
$("#nick").on("keypress input", function(e) { 
 
    var keyCode = e.keyCode || e.which; // Browser-independant 
 

 
    // If left or right arrow, then don't do anything 
 
    if (keyCode === 8 || keyCode === 37 || keyCode === 39) { 
 
    return true; 
 
    } 
 

 
    var $this = $(this); // Cache this 
 
    clearTimeout(timeout); // Clear previous timeouts 
 

 
    timeout = setTimeout(function() { 
 
    $this.val($this.val().replace(/[^A-Za-z]/g, '')); 
 
    }, 500); 
 
});

input:valid { 
 
    color: green; 
 
} 
 
input:invalid { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input id="nick" pattern="[A-Za-z]+" />

Regex的說明：

正則表達式上pattern，[A-Za-z]+僅匹配字母字符大寫和小寫的一個或多個。

Answer 3

如果我正確讀取它，你說的是在無效字符消失之前插入延遲？

這有點棘手，因爲在它消失之前有多長時間你想看到它的子句&如果你比在輸入下一個字母之前輸入更快，那麼該怎麼辦？

照顧這些之後，就應該是這個樣子：

var removelast = false, remover; 
 

 
var nick = $("#nick").on("keypress", function(event) { 
 

 
    function remove() { 
 
     nick.val(nick.val().slice(0,-1)); 
 
     removelast = false; 
 
    } 
 
    
 
    clearTimeout(remover); 
 
    if(removelast) remove(); 
 
    
 
    var englishAlphabetAndWhiteSpace = /[A-Za-z]/g; 
 

 
    var key = String.fromCharCode(event.which); 
 
    var allowed = event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39 || englishAlphabetAndWhiteSpace.test(key); 
 
    if (!allowed) { 
 
     removelast = true; 
 
     remover = setTimeout(remove, 100); 
 
    } 
 

 
    return true; 
 
});

<input type="text" id="nick" > 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>