更改按鍵

Question

在輸入框或contenteditable = true div中，如何修改字母「a」的按鍵以返回字母「b」的按鍵？也就是說，每次在div中鍵入字母「a」時，輸出實際上都是字母「b」。

我不是那種在IE中工作的解決方案 - 只有一種適用於Safari，Chrome，& FF。

在Chrome中，我可以看到按鍵事件具有屬性「charCode」，「keyCode」和「which」，所有這些都被分配了按鍵事件編號。如果我在按鍵上觸發了一個事件，我可以修改這些值，但我無法弄清楚返回的內容，因此鍵入的實際鍵是不同的。例如：

$(window).keypress(function(e){ //$(window) is a jQuery object 
    e.charCode = 102; 
    e.which = 102; 
    e.keyCode = 102; 
    console.log(e); 
    return e; 
}); 

我也可以看到，則charCode，其中，和鍵一起，還有一個「originalEvent」屬性，它反過來也具有這些特性。但是，我一直無法修改這些（我嘗試了諸如e.originalEvent.charCode = 102之類的東西）。

Answer 1

您不能更改與某個按鍵事件關聯的字符或按鍵，或者完全模擬按鍵事件。但是，您可以自己處理按鍵，並在當前插入點/插入符處手動插入所需的字符。我已經提供了代碼在Stack Overflow的許多地方執行此操作。對於contenteditable元件：

• Need to set cursor position to the end of a contentEditable div, issue with selection and range objects

這裏的一個的jsfiddle例如：http://www.jsfiddle.net/Ukkmu/4/

對於輸入：

• Can I conditionally change the character entered into an input on keypress?

• show different keyboard character from the typed one in google chrome

跨瀏覽器的jsfiddle例如：http://www.jsfiddle.net/EXH2k/6/

IE> = 9和非IE的jsfiddle例如：http://www.jsfiddle.net/EXH2k/7/

Answer 2

你可以爲一個<input>或<textarea>做那麼什麼是公正，確保該值不具有任何「一」字：

$('input.whatever').keypress(function() { 
    var inp = this; 
    setTimeout(function() { 
    inp.value = inp.value.replace(/a/g, 'b'); 
    }, 0); 
}); 

這種做法可能無法處理所有可能的這些技巧你可以用真正換出「壓制」角色的東西來拉動，但我不知道有什麼辦法可以做到這一點。

編輯 —哦，那我在這個例子中鍵入與「修正」的超時處理髮生的原因是，它可以確保瀏覽器有機會處理的「按鍵」本地行爲事件。當超時處理程序代碼運行時，我們確信元素的值將被更新。我意識到，這個代碼有一點點的難度。

Answer 3

我不知道這是否是「容易」做，能，像這樣的東西：

$(window).keypress(function(e) { 
    //Captures 'a' or 'A' 
    if(e.which == 97 || e.which == 65) 
    { 
     //Simulate a keypress in a specific field 
    } 
}); 

我知道，jQuery有一個模擬插件模擬按鍵事件等，jQuery Simulate。這可能是值得研究的 - 也可能是某種類型的jQuery Trigger()事件。

Answer 4

我的解決方案的例子（在input[type=text]字符','到'.'變化）：

element.addEventListener('keydown', function (event) { 
if(event.key === ','){ 
    setTimeout(function() { 
    event.target.value += '.'; 
    }, 4); 
    event.preventDefault(); 
};