1

これは私を何時間も怒らせてきました。単純なものが欠けているか、そうでないかもしれません。

Javascript を使用して、個人のホームページをコンソールのようなアプリケーションに変えています。ここで見ることができます: www.fort-hub.com

私はキーストロークをマッピングしており、バックスペース (キーコード 8) を使用して、呼び出されinnerHTMLたコンソール入力のプロパティを変更し、次のように終了文字を 1 つ少なくしています。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 に移動し、何かを入力してバックスペースを押して、これをテストしてください。1 文字が削除されますが、バックスペースを繰り返しても文字列の残りの文字は削除されません。

4

2 に答える 2

4

0x08最後の文字を削除した後、実際のバックスペース文字コード ( ) を要素に追加しています。これはブラウザーによってレンダリングされませんが、次に最後の文字をもう一度削除しようとすると、実際にはそのバックスペース文字が削除され、すぐに新しいバックスペース文字が追加されます。

処理した制御文字を要素の に追加しないでくださいinnerHTML。

于 2012-10-21T21:18:26.770 に答える
4

押されたキーがバックスペースだった場合、最後の文字を から削除しますinput(そして、innerHTML を に設定しますremain) 。これは追加されます (フォントとブラウザーによっては表示されず、Stackoverflow によって入力として受け入れられません)。keyCharinnerHTML\x08

returnの直後にステートメントを追加してconsoleIn.innerHTML = input.slice(0, -1);、keypress-handler を中止します。

于 2012-10-21T21:19:06.923 に答える