这已经让我发疯了几个小时,我确信我错过了一些简单的东西,或者也许没有。
我正在使用 Javascript 将我的个人主页变成类似控制台的应用程序。您可以在这里查看:www.fort-hub.com
我正在映射击键并使用退格键(键码 8)来更改innerHTML调用的控制台输入的属性,div以#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>
Run Code Online (Sandbox Code Playgroud)
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();
}
...
}
Run Code Online (Sandbox Code Playgroud)
因此,请通过转到 URL、输入内容并按退格键来测试这一点。将删除一个字符,但重复退格不会删除字符串的其余字符。
如果按下的键是退格键,则从 中删除最后一个字符input(并将innerHTML 设置为remain),但仍将 添加到keyChar中innerHTML。此附加内容\x08(根据字体和浏览器不显示,不被 Stackoverflow 接受为输入)。
return在 后面添加一条语句consoleIn.innerHTML = input.slice(0, -1);以中止按键处理程序。