Question

我希望使用textarea代替window.prompt(title)为用户提供类似终端的输入方式。

我的代码是：

     var Module = {
         waitingForEnter: false, // for user_input function

         ...

         user_input: (function() {
            var element = document.getElementById('output'); // textarea control
            if (element) element.value = ''; // clear browser cache

            return function() {
                // enable for user typing
                element.readOnly = false;
                Module.waitingForEnter = true;
                var initialLength = element.value.length;

                element.scrollTop = element.scrollHeight; // focus on bottom
                element.focus(); // set caret blinking

                while (Module.waitingForEnter) {}; // problem: hangs here and does not allow user to type !

                // disable for typing and return what the user typed
                element.readOnly = true;
                return element.value.substr(initialLength, element.value.length-1); // ignore last \n
            };
        })(),

        ...

问题在于它因为while循环而挂起并且我相信它。我该如何解决？另外，我如何为textarea添加侦听器，以便以编程方式键入Enter并设置Module.waitingForEnter = false？

Answer 1

你是对的，浏览器永远不会越过这一行： using System.Xml.XPath; var xml = XElement.Parse(html); var innderDiv = xml.XPathSelectElement("//div[@id='stuff' and @data-qid=5]");

您需要做的是处理事件，更具体地说是关键事件。这些允许您跟踪用户输入。

例如：

while (Module.waitingForEnter) {}

我选择了var element = document.getElementById('output'); element.addEventListener('keypress', function(event) { if ((event.keyCode || event.which) === 13) { // enter key // assuming the textarea contains only the user input handleUserInput(this.value); // clear the user input this.value = ''; } });，因为这是最直观的一个，可以观察到以下事件（按触发顺序）：

keypress＆gt;一把钥匙掉了下来
keydown＆gt;一把钥匙上升
keyup＆gt;一把钥匙再次下降

如果您尝试模拟终端或其他内容，我认为keypress就足够了。

Answer 2

我认为在这种情况下你不需要display:none循环。考虑下面显示的解决方案：

while

剩下的一件事就是决定在哪一刻允许用户恢复输入（用其他方式修改我的var Module = { waitingForEnter: false, // for user_input function inputEl: document.getElementById('output'), // textarea control user_input: (function() { if (this.inputEl) this.inputEl.value = ''; // clear browser cache return function(e) { var initialLength = e.target.value.length; e.target.scrollTop = e.target.scrollHeight; // focus on bottom e.target.focus(); // set caret blinking return e.target.value.substr(initialLength, e.target.value.length-1); // ignore last \n }; })(), allow_input: function(){ setTimeout(function(){ // enable for user typing Module.inputEl.readOnly = false; Module.waitingForEnter = true; }, 5000); }, block_input: function(e){ // disable for typing and return what the user typed e.target.readOnly = true; this.waitingForEnter = false; this.allow_input(); // just for example : allow user input in defered manner }, init: function(){ this.inputEl.addEventListener('input', this.user_input.bind(this)); this.inputEl.addEventListener('change', this.block_input.bind(this)); } }; Module.init();存根）
https://jsfiddle.net/56dv6tr3/

如何用JS中的textarea重写window.prompt（title）？

2 个答案: