如何使用JavaScript在Windows中模拟Alt+Numpad功能？

huangapple
go评论106阅读模式
英文:

How can I use JavaScript to emulate Alt+Numpad functionality in Windows?

问题

  1. window.addEventListener("DOMContentLoaded", function() {
  2.     var confirmButton = document.getElementById("Confirm");
  3.     var input = document.getElementById("input");
  4.     var output = document.getElementById("output");
  5.     confirmButton.addEventListener("click", clickConfirmButton);
  6.     
  7.     function clickConfirmButton() {
  8.         var inputValue = input.value;
  9.         if (/^\d+$/.test(inputValue)) {
  10.             var keyCode = parseInt(inputValue);
  11.             var char = String.fromCharCode(keyCode);
  12.             output.value = char;
  13.         } else {
  14.             alert("Please enter a valid number.");
  15.         }
  16.     }
  17. })
英文:

In Windows, we can press Alt+Numpad to enter characters.

For example, Alt 244 is ⌠.

I want to use javascript to realize this function.

By entering a number (like 244) in the input textbox and clicking the button, the character would occur in the output textbox.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. window.addEventListener(&quot;DOMContentLoaded&quot;, function() {
  2.     var confirmButton = document.getElementById(&quot;Confirm&quot;);
  3.     var input = document.getElementById(&quot;input&quot;);
  4.     var output = document.getElementById(&quot;output&quot;);
  5.     confirmButton.addEventListener(&quot;click&quot;, clickConfirmButton);
  6.     function clickConfirmButton() {
  7.         // Please write here
  8.     }
  9. })

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4.     &lt;meta charset=&quot;UTF-8&quot;&gt;
  5.     &lt;title&gt;Alt+Numpad&lt;/title&gt;
  6. &lt;/head&gt;
  7. &lt;body&gt;
  8.     &lt;div style=&quot;text-align: center&quot;&gt;
  9.         &lt;div&gt;&lt;label for=&quot;input&quot;&gt;Input: &lt;/label&gt;&lt;input style=&quot;height: 30px; font-size: 20px;&quot; id=&quot;input&quot;&gt;&lt;/div&gt;
  10.         &lt;div&gt;&lt;label for=&quot;output&quot;&gt;Output: &lt;/label&gt;&lt;input style=&quot;height: 30px; font-size: 20px;&quot; id=&quot;output&quot;&gt;&lt;/div&gt;
  11.         &lt;div&gt;&lt;button id=&quot;Confirm&quot;&gt;Confirm&lt;/button&gt;&lt;/div&gt;
  12.     &lt;/div&gt;
  13. &lt;/body&gt;
  14. &lt;/html&gt;

<!-- end snippet -->

I've tried use KeyBoardEvent and dispatchEvent but there's nothing in the output textbox.

Please write only the javascript code and no jquery, html or css.

答案1

得分: 2

I guess the answer is here: https://stackoverflow.com/questions/13636820/convert-unicode-characters-to-extended-ascii

Also it's more interesting to update the output immediately and prevent typing characters but numbers in the input:

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  5.     const input = document.getElementById("input");
  6.     const output = document.getElementById("output");
  8.     input.addEventListener("input", 
  9.       () => output.value = input.value ? String.fromCharCode(input.value) : ''
  10.     );
  12.     input.addEventListener("beforeinput", 
  13.       e => e.data && (/\d+/.test(e.data) || e.preventDefault())
  14.     );
  16. <!-- language: lang-html -->
  18.     <div style="text-align: center">
  19.             <div><label for="input">Input: </label><input style="height: 30px; font-size: 20px;" id="input"></div>
  20.             <div><label for="output">Output: </label><input style="height: 30px; font-size: 20px;" id="output"></div>
  21.         </div>
  23. <!-- end snippet -->
英文:

I guess the answer is here: https://stackoverflow.com/questions/13636820/convert-unicode-characters-to-extended-ascii

Also it's more interesting to update the output immediately and prevent typing characters but numbers in the input:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const input = document.getElementById(&quot;input&quot;);
  2. const output = document.getElementById(&quot;output&quot;);
  4. input.addEventListener(&quot;input&quot;, 
  5.   () =&gt; output.value = input.value ? String.fromCharCode(input.value) : &#39;&#39;
  6. );
  8. input.addEventListener(&quot;beforeinput&quot;, 
  9.   e =&gt; e.data &amp;&amp; (/\d+/.test(e.data) || e.preventDefault())
  10. );

<!-- language: lang-html -->

  1. &lt;div style=&quot;text-align: center&quot;&gt;
  2.         &lt;div&gt;&lt;label for=&quot;input&quot;&gt;Input: &lt;/label&gt;&lt;input style=&quot;height: 30px; font-size: 20px;&quot; id=&quot;input&quot;&gt;&lt;/div&gt;
  3.         &lt;div&gt;&lt;label for=&quot;output&quot;&gt;Output: &lt;/label&gt;&lt;input style=&quot;height: 30px; font-size: 20px;&quot; id=&quot;output&quot;&gt;&lt;/div&gt;
  4.     &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月30日 08:06:16
  • 转载请务必保留本文链接：https://go.coder-hub.com/76360913.html
  • character
  • input
  • javascript
  • windows
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定