1

这让我发疯了好几个小时，我确定我错过了一些简单的东西，或者可能没有。

我正在使用 Javascript 将我的个人主页变成类似应用程序的控制台。你可以在这里查看：www.fort-hub.com

我正在映射击键并使用退格键（键码 8）来更改调用innerHTML的控制台输入的属性，以减少一个结束字符，如下所示：div#inslice()

HTML：

<!doctype html>

<html lang='en-gb'>

<head>

<meta charset="UTF-8">
<title>FortHUB</title>
<link href="ss.css" rel="stylesheet" type="text/css">   
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> 

</head>

<body>

<div id="console">
    <div id="out"><h1>Welcome to fort-hub console</h1></div>

    <div id="in">
        <span id="text"></span><span id="cursor"><</span>
    </div>
</div>

<script src="fH.js"></script>

</body>

</html>

Javascript：

/* Globals */
var _NL_ = '>';
var consoleIn = document.getElementById('text');
var consoleOut = document.getElementById('out');

/* Func in question */
function keyPress(event)
{
    event.preventDefault();
    event.stopPropagation();

    var e = event || window.event;
    var key = e.which || e.keyCode;
    var keyChar;

    var allowedChars = new Array();
    allowedChars[0] = 8; /* backspace */
    allowedChars[1] = 13; /* return */
    allowedChars[2] = 32; /* space */

    /* Alphanumeric range only */
    if(key > 46 && key < 90 || inArray(allowedChars, key) === true)
    {
        keyChar = String.fromCharCode(key);
        var input = trim(consoleIn.innerHTML);
        /* Map backspace */
        if(key === 8)
        {
               consoleIn.innerHTML = input.slice(0, -1);
        }
        ...
        consoleIn.innerHTML += keyChar.toLowerCase();
    }
    ...
}

因此，请通过转到 URL、输入内容并按退格键来测试这一点。将删除一个字符，但重复退格不会删除字符串的其余字符。

4

2 回答 2

4

删除最后一个字符后，您将实际的退格字符代码 ( ) 附加0x08到您的元素。它不是由浏览器呈现的，但是下次您尝试再次删除最后一个字符时，实际上是删除了该退格符，并立即添加了一个新的退格符。

您不应将已处理的控制字符附加到元素的innerHTML.

于 2012-10-21T21:18:26.770 回答
4

如果按下的键是退格键，则从 中删除最后一个字符input（并将 innerHTML 设置为remain），但仍将 添加keyChar到innerHTML. 这个附加\x08（根据字体和浏览器不显示，不被 Stackoverflow 接受为输入）。

在 之后添加一条return语句consoleIn.innerHTML = input.slice(0, -1);以中止按键处理程序。

于 2012-10-21T21:19:06.923 回答