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

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

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

问题

window.addEventListener("DOMContentLoaded", function() {
    var confirmButton = document.getElementById("Confirm");
    var input = document.getElementById("input");
    var output = document.getElementById("output");
    confirmButton.addEventListener("click", clickConfirmButton);
    
    function clickConfirmButton() {
        var inputValue = input.value;
        if (/^\d+$/.test(inputValue)) {
            var keyCode = parseInt(inputValue);
            var char = String.fromCharCode(keyCode);
            output.value = char;
        } else {
            alert("Please enter a valid number.");
        }
    }
})
英文:

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 -->

window.addEventListener(&quot;DOMContentLoaded&quot;, function() {
    var confirmButton = document.getElementById(&quot;Confirm&quot;);
    var input = document.getElementById(&quot;input&quot;);
    var output = document.getElementById(&quot;output&quot;);
    confirmButton.addEventListener(&quot;click&quot;, clickConfirmButton);
    function clickConfirmButton() {
        // Please write here
    }
})

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

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Alt+Numpad&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div style=&quot;text-align: center&quot;&gt;
        &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;
        &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;
        &lt;div&gt;&lt;button id=&quot;Confirm&quot;&gt;Confirm&lt;/button&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&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:

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

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

    const input = document.getElementById("input");
    const output = document.getElementById("output");

    input.addEventListener("input", 
      () => output.value = input.value ? String.fromCharCode(input.value) : ''
    );

    input.addEventListener("beforeinput", 
      e => e.data && (/\d+/.test(e.data) || e.preventDefault())
    );

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

    <div style="text-align: center">
            <div><label for="input">Input: </label><input style="height: 30px; font-size: 20px;" id="input"></div>
            <div><label for="output">Output: </label><input style="height: 30px; font-size: 20px;" id="output"></div>
        </div>

<!-- 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 -->

const input = document.getElementById(&quot;input&quot;);
const output = document.getElementById(&quot;output&quot;);

input.addEventListener(&quot;input&quot;, 
  () =&gt; output.value = input.value ? String.fromCharCode(input.value) : &#39;&#39;
);

input.addEventListener(&quot;beforeinput&quot;, 
  e =&gt; e.data &amp;&amp; (/\d+/.test(e.data) || e.preventDefault())
);

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

&lt;div style=&quot;text-align: center&quot;&gt;
        &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;
        &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;
    &lt;/div&gt;

<!-- end snippet -->

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

发表评论

匿名网友

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

确定