Javascriptで、タイプした文字を画面に表示させています。

入力した文字が出力される枠は、あらかじめdivで定義してあります。
<div id="japanese" class="auto-style1" style="height: 22px"></div>
<!--このレイヤ-の中へ文字を出力します-->
<div class="input" id="答えの枠" >
<span class="input" style = " color:orange; font-size:30px;font-weight:900"></span>

文字をタイプして、表示させるコードは以下の通りですが、入力した場所の下に出している文字類が下にずれてしまいます。
document.getElementById(layName).textContent=html
入力していないときは、文字が入る場所はブランクのままですが、タイプして、そこに文字が入ると全体に改行されて最初から画面に出してる文字類が全部下にずれてしまいます。
文字が入る場所は、絶対座標で固定にするなど考えたのですが、それもやりたくありません。
良い方はありますでしょうか?

この質問は↓の続きになります。
http://q.hatena.ne.jp/1445407593

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2015/10/23 12:27:20
  • 終了:2015/10/29 12:06:19

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4594ベストアンサー獲得回数19332015/10/23 13:25:20

点滅するカーソルを表示するのは、止めにしたんですね。
以下のように、文字が入るエリアの後にダミーの SPAN 要素を入れてみてください。

<!--このレイヤ-の中へ文字を出力します-->
<div class="input" id="答えの枠" >
<span class="input" style = " color:orange; font-size:30px;font-weight:900"></span>
<span class="dummy">&nbsp;</span>	<!-- ★これを追加します -->
</div>

クラス名は何でも構いません(指定しなくても良い)。
要素の中身は、半角の空白ではダメです。
先のコードのように実体参照 &nbsp; にするか、全角の空白などにしてください。

他16件のコメントを見る
id:a-kuma3

是非、もう1つ教えて下さい。
エンターをおした時に、正解の判定をするのですが、そのときタイプした文字を、カーソルを含めて画面から消したいのですが、

お、jQuery も使ってますか。
jQuery を使うなら、こんな感じ。

$("#inputbox").text("");

jQuery は CSS のセレクタで指定するので、id 指定なら # をつけます。
返ってくるのは HTML の要素オブジェクトではないので、jQuery のメソッドを使って操作します。

同じことを素の DOM でやるならこう。

document.getElementById("inputbox").textContent = "";

ただ、両方ともカーソルを持っている要素ごとバッサリ消すので、回答枠の下にある文字がずれるかも。
回答枠の高さをカチット決めてあれば、ずれないかもしれません。

2015/10/27 15:04:22
id:kajironpu

とても勉強になりました。どうもありがとうございます!

2015/10/28 13:27:00

その他の回答(1件)

id:pogpi No.1

POGPI回答回数378ベストアンサー獲得回数502015/10/23 12:55:00

入力するところを、textareaにするのは、どうですか。

id:kajironpu

ありがとうございます。textareaにしてみましたが、デザインが変わるようなので

であらかじめ決めた枠を利用できたら幸いです。

2015/10/23 13:41:18
id:a-kuma3 No.2

a-kuma3回答回数4594ベストアンサー獲得回数19332015/10/23 13:25:20ここでベストアンサー

点滅するカーソルを表示するのは、止めにしたんですね。
以下のように、文字が入るエリアの後にダミーの SPAN 要素を入れてみてください。

<!--このレイヤ-の中へ文字を出力します-->
<div class="input" id="答えの枠" >
<span class="input" style = " color:orange; font-size:30px;font-weight:900"></span>
<span class="dummy">&nbsp;</span>	<!-- ★これを追加します -->
</div>

クラス名は何でも構いません(指定しなくても良い)。
要素の中身は、半角の空白ではダメです。
先のコードのように実体参照 &nbsp; にするか、全角の空白などにしてください。

他16件のコメントを見る
id:a-kuma3

是非、もう1つ教えて下さい。
エンターをおした時に、正解の判定をするのですが、そのときタイプした文字を、カーソルを含めて画面から消したいのですが、

お、jQuery も使ってますか。
jQuery を使うなら、こんな感じ。

$("#inputbox").text("");

jQuery は CSS のセレクタで指定するので、id 指定なら # をつけます。
返ってくるのは HTML の要素オブジェクトではないので、jQuery のメソッドを使って操作します。

同じことを素の DOM でやるならこう。

document.getElementById("inputbox").textContent = "";

ただ、両方ともカーソルを持っている要素ごとバッサリ消すので、回答枠の下にある文字がずれるかも。
回答枠の高さをカチット決めてあれば、ずれないかもしれません。

2015/10/27 15:04:22
id:kajironpu

とても勉強になりました。どうもありがとうございます!

2015/10/28 13:27:00

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません