Javascript string.slice() 只工作一次答案

【问题标题】：Javascript string.slice() works only onceJavascript string.slice() 只工作一次
【发布时间】：2012-10-21 21:08:19
【问题描述】：

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

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

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

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、输入内容并按退格键来测试这一点。一个字符将被删除，但重复的退格不会删除字符串的其余字符。

【问题讨论】：

查看网站时出现 SSL 连接错误。你能做一个JSfiddle吗？
很抱歉。介意再试一次吗？我删除了已过时的 .htaccess，并引用了我不再使用的 SSL。

标签： javascript slice

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：