3

我正在为 Javascript 应用程序实现屏幕键盘。文本应出现在 textarea-Element 中。我创建文本事件没有问题，但感觉无法创建非文本事件，例如退格键。这是一些示例代码：

    <html>
    <头部>
    <title>测试文本区域事件</title>
    <script type="text/javascript">
    功能日志（文本）{
        var elem = document.getElementById("log");
        如果（元素）{
            elem.innerHTML += "<br/>" + 文本；
        }
    }
    功能日志事件（e）{
        log("类型：" + e.type + "，其中：" + e.which + "，keyCode：" + e.keyCode + "，charCode：" + e.charCode + "，keyIdentifier：" + e.keyIdentifier + ", 数据: " + e.data);
    }
    功能日志清除（）{
        var elem = document.getElementById("log");
        如果（元素）{
            elem.innerHTML = "";
        }
    }
    函数 sendBackEvent() {
        var textarea = document.getElementById("textarea");
        如果（！文本区域）{
            返回;
        }
        var ke1 = document.createEvent("KeyboardEvent");
        ke1.initKeyboardEvent("keydown", true, true, window, "U+0008", 0, ""); // U+0008 --> 退格
        // 如何设置“keyCode”和“which”？
        // 1. ke1.keyCode = 8; 由于“可写：假”而被忽略
        // 2. 删除 ke1.keyCode 也会被忽略
        // 和 Object.defineProperty(KeyboardEvent.prototype, "keyCode", ... 不管...);
        // 由于 "configurable: false" 将导致异常
        // 3. 生成更通用的事件（例如“var e = document.createEvent("Events");"）
        // 并设置所有必要的道具（例如 "e.initEvent("keydown", true, true);e.keyCode=8;e.which=8;"）
        // 会起作用，但 textarea 会忽略事件
        textarea.dispatchEvent(ke1);

        var ke2 = document.createEvent("KeyboardEvent");
        ke2.initKeyboardEvent("keyup", true, true, window, "U+0008", 0, ""); // U+0008 --> 退格
        // 和上面一样的问题
        textarea.dispatchEvent(ke2);
    }
    函数初始化（）{
        var textarea = document.getElementById("textarea");
        如果（！文本区域）{
            返回;
        }
        textarea.addEventListener("keydown", logEvent, false);
        textarea.addEventListener("keypress", logEvent, false);
        textarea.addEventListener("keyup", logEvent, false);
        textarea.addEventListener("textInput", logEvent, false);
    }
    </脚本>
    </head>
    <body onload="init()">
    <textarea id="textarea" name="text" cols="100" rows="20"></textarea><br/><br/>
    <button onclick="sendBackEvent()">发送返回事件</button>
    <button onclick="logClear()">清除日志</button><br/>
    <div id="log"></div>
    </正文>
    </html>

这里有趣的功能是sendBackEvent(). 我努力获得完全相同的事件，例如按下物理键盘上的退格键，但没有成功。

我知道有一个Webkit-Bug，但希望有其他方法可以让它工作。有没有人有同样的问题？能解决吗？如何？此处建议的解决方案（调用 new KeyboardEvent(...)）不起作用，因为直接调用 KeyboardEvent 构造函数会导致以下异常：

异常：TypeError：'[object KeyboardEventConstructor]' 不是构造函数（评估'new KeyboardEvent(...)'）

我没有更多的想法了。

4

1 回答 1

3

由于似乎没有出路，我发现自己不得不安装自己的退格事件处理程序。工作代码（现在没有记录）在这里：

    <html>
    <头部>
    <title>测试文本区域事件</title>
    <script type="text/javascript">
    函数 sendBackEvent() {
        var textarea = document.getElementById("textarea");
        如果（！文本区域）{
            返回;
        }
        var ke1 = document.createEvent("事件");
        ke1.initEvent("keydown", true, true);
        ke1.keyCode = ke1.which = 8; //退格
        textarea.dispatchEvent(ke1);

        var ke2 = document.createEvent("事件");
        ke2.initEvent("keyup", true, true);
        ke2.keyCode = ke2.which = 8; //退格
        textarea.dispatchEvent(ke2);
    }
    函数handleBackEvent（e）{
        if(e.keyCode != 8) {
            返回;
        }
        if (textarea.value.length == 0) {
            返回;
        }
        var text = textarea.value;
        var selectionStart = textarea.selectionStart;
        var selectionEnd = textarea.selectionEnd;
        if (selectionStart < selectionEnd) {
            var text1 = (selectionStart > 0 ? text.slice(0, selectionStart) : "");
            var text2 = (selectionEnd < text.length ? text.slice(selectionEnd) : "");
            textarea.value = text1 + text2;
        }
        否则如果（选择开始> 0）{
            var text1 = (selectionStart - 1 > 0 ? text.slice(0, selectionStart - 1) : "");
            var text2 = (selectionStart < text.length ? text.slice(selectionStart) : "");
            textarea.value = text1 + text2;
            选择开始--;
        }
        textarea.selectionStart = textarea.selectionEnd = selectionStart;
        e.preventDefault();
        e.stopPropagation();
        返回假；
    };
    var 文本区域；
    函数初始化（）{
        textarea = document.getElementById("textarea");
        如果（！文本区域）{
            返回;
        }
        textarea.addEventListener("keydown", handleBackEvent, false);
    }
    </脚本>
    </head>
    <body onload="init()">
    <textarea id="textarea" name="text" cols="100" rows="20"></textarea><br/><br/>
    <button onclick="sendBackEvent()">发送返回事件</button>
    </正文>
    </html>

以防万一其他人遇到同样的麻烦。

于 2013-01-09T13:49:03.350 回答