Linuxの端末を試してみると失敗する

Question

これは愚かな質問かもしれませんが、これは簡単に見つけられるかもしれませんが、私はこれを非常に新しくしているので、探しているものや見つけられないようです私は何を探す必要があるかわからないので、私はここにいる。

私がしようとしているのは、一種のLinux端末を作ることです...これは私が今までに得たものです。私は真=のcontentEditableだけでなく、入力要素を試しでのdivを作成しようとしているが、どちらも思わないしてきた

私が上でこだわっていることは、実際の入射テキスト部分である

... 私はそれがほしいと思う方法を働かせている。私はこのために使用してい 現在の構造は次のとおりです。

<div class="title" contenteditable="false" > 
admin@localhost:~$ 
<div class="write-point" contenteditable="true" ></div> 
<div class="linux-cursor" contenteditable="false"></div> 

しかし、これはテキストのみの行全体を削除します。 "admin @ localhost：〜$"とカーソルがあります。

JavaScriptを使ってテキストの後ろにカーソルを置こうとしましたが、まったく動作しませんでした。

function forStackOverFlow() { 
var textInput = document.getElementsByClassName('write-point'); 

textInput.onkeydown = function(e) { 
    console.log(textInput.value); 
    var childTag = document.getElementsByClassName("write-point"); 
    childTag.parentNode.insertBefore(textInput.value, childTag.nextSibling); 
}}; 

だから、私の主な質問は以下のとおり許可することが可能ですどのように、どのような入力テキスト（ユーザー入力）

の終わりにDIV（カーソル要素）を移動するために必要とされる

• ウェブページが読み込まれたらすぐに入力するユーザーですか？

おかげで、任意のヘルプは:)

Answer 1

私はそれはあなたのケースで管理する方が容易なインライン要素、ですので、スパンの代わりにdiv要素を使用することをお勧め素晴らしいことです。

次は、リスナーとのeatchキーボードのエントリキャッチすることができます：

document.body.onkeydown 

をし、表示することができます変数に各キーを追加するために彼に言います。

私は、エンターまたはバックスペースイベントのように、管理しなければならないすべての機能について考えることができます。あなたがここに必要となるコードを演奏して見つけることができます

：http://keycode.info/

ここでは、作業の抜粋です：

var command = ""; 
 

 
document.body.onkeydown = function(e){ 
 
    var writePoint = document.getElementById('writePoint'); 
 
    command += String.fromCharCode(e.keyCode); 
 
    writePoint.innerHTML = command; 
 
    };

.linux-cursor{ 
 
    width:7px; 
 
    height:15px; 
 
    background-color:green; 
 
    display:inline-block; 
 
}

<span class="title" contenteditable="false" > 
 
    admin@localhost:~$ 
 
</span> 
 
<span class="write-point" id="writePoint" contenteditable="true" ></span> 
 
<span class="linux-cursor" contenteditable="false"></span>

・ホープこのヘルプあなたは、それは素敵なプロジェクトのように見えます。