人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: kajironpu
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● pogpi

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


kajironpuさんのコメント
ありがとうございます。textareaにしてみましたが、デザインが変わるようなので<DIV>であらかじめ決めた枠を利用できたら幸いです。

2 ● a-kuma3
ベストアンサー

点滅するカーソルを表示するのは、止めにしたんですね。
以下のように、文字が入るエリアの後にダミーの 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; にするか、全角の空白などにしてください。


kajironpuさんのコメント
ありがとうございます。はじめ、何か枠の中に空文字を表示させておけばいいのかなと思っていたところでした。 しかし、上の方法で試してみましたがやはりだめでした。 ちなみに、タイプした文字を表示させている枠の下にも解説や例文を表示させている枠を2つほど、<DIV>で定義しており、文字をタイプすると、それらが全部下にずれてしまいます。

a-kuma3さんのコメント
>> はじめ、何か枠の中に空文字を表示させておけばいいのかなと思っていたところでした。 << 枠の中に文字を入れておくと、バックスペースで全てを消したときの処理が面倒(できないわけじゃないけど、要らぬ不具合の原因になりそう)なので、それとは関係ないところで対処した方が良いかな、と。 https://jsfiddle.net/a_kuma3/t39ocLLa/2/ これは、[http://q.hatena.ne.jp/1444790440#a1252201:title=以前の回答]で使ったサンプルをちょっと変えたものです。 <tt>position: absolute;</tt> をすべて外して、答えの DIV の後に、いくつかの DIV を足してます。 答えの枠の前<span style="color:red;" title="特に">後</span>のタグとか CSS を見られれば、もっと具体的に答えられると思います。 もしくは、ずれちゃう、という部分だけを再現するようなコードを jsFiddle に書き込んでくれる、とか。

kajironpuさんのコメント
ありがとうございます! やっと謎が解けました。 <div class="input" id="答えの枠" style="height: 1px" どうやら、枠の高さが問題だったみたいです。HTMLのほうは、microsot expression Web4というものを使っているのですが、枠のサイズとか適当にしていました。高さを1pxくらいに思いっきり詰めたら、改行しなくなりました。トホホ、、、ありがとうございます。

kajironpuさんのコメント
追伸 ちなみに、カーソル点滅も入れたいのですが、 <span class="cursor">_</span> ↑を <span class="dummy">&nbsp;</span>の 後に入れるだけでいいのでしょうか?

a-kuma3さんのコメント
カーソルを入れるなら、この回答で書いたダミーの SPAN 要素は必要ありません。 カーソルの <tt>"_"</tt> を抱えている SPAN が、ダミーの SPAN の代わりをしてくれます。

a-kuma3さんのコメント
こんな感じで。 https://jsfiddle.net/a_kuma3/t39ocLLa/3/

kajironpuさんのコメント
ありがとうございます。またまた難儀しております。↑で作成して頂いたjsfiddleのほうは問題なく動作することを確認しましたが、自分の作成中のものはなぜか、カーソルがでません。 試しに、下のように<DIV>の位置を<SPAN>の後に入れて見たところ タイプした文字の真下にカーソルがちゃんと表示されます。 <!??このレイヤ?の中へ文字を出力します??> <div class="input" id="英文の答えの枠" style="height: 6px; width: 105px;" ><span class="input" style="color:orange; font?size:30px;font?weight:900"></span></div> <!?? カーソルの SPAN があれば OK ??> <span class="cursor">_</span> しかし、↓のようだと、なぜか全くカーソル表示されませんでした。 <!??このレイヤ?の中へ文字を出力します??> <div class="input" id="英文の答えの枠" style="height: 6px; width: 105px;" ><span class="input" style="color:orange; font?size:30px;font?weight:900"></span> <!?? カーソルの SPAN があれば OK ??> <span class="cursor">_</span></div> もしかしたら、DIVで指定したIDの枠のサイズや、位置関係などが関係しているのか?? 何か原因なのか、今調べております。

kajironpuさんのコメント
↑は、なぜか半角だとうまく表示されないため、全角に変換しました。見づらくてすみません。

a-kuma3さんのコメント
なんだろう... 貼った部分だけ見ると、良さそうな感じですけどね。 とりあえず、答えの枠に指定している height と width を消すとどうなるでしょう。 >> ↑は、なぜか半角だとうまく表示されないため、全角に変換しました。 << 回答のコメント欄とかは HTML タグを解釈してくれちゃうので、特別な記法を使います。 つ [http://hatenadiary.g.hatena.ne.jp/keyword/%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%9F%E3%82%B3%E3%83%BC%E3%83%89%E3%82%84%E3%81%AF%E3%81%A6%E3%81%AA%E8%A8%98%E6%B3%95%E3%82%92%E3%81%9D%E3%81%AE%E3%81%BE%E3%81%BE%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%EF%BC%88%E3%82%B9%E3%83%BC%E3%83%91%E3%83%BCpre%E8%A8%98%E6%B3%95%EF%BC%89:title] >> &gt;|| (HTML のタグなどを含んだ文字列) ||&lt; <<

kajironpuさんのコメント
ありがとうございます。まだ原因がつかめていません、、、、 その後、別の方法も考えてみたのですが、タイプした文字のあとにカーソルを足す方法ということで 一度、タイプした文字を表示させたあとに >|| outputLAYER('英文の答えの枠',inpwd) //入力文字の直後に、カーソルを入れてinnerHTMLでタイプした文字を書き換え document.getElementById("英文の答えの枠").innerHTML = inpwd+'<font size="5" color="white"><marquee scrolldelay="400" scrollamount="10" width="10">| </b></marquee></font>' ||< このやり方をやってみました。点滅のやり方はBlinkが使えなかったので http://blogs.yahoo.co.jp/pirates_x_jack/30772312.html こちらのサイトを参照してみました。 なんとか、タイプした文字の後にカーソル点滅が表示されるようになりましたが、 文字を打っていないときは、表示されない点だけは仕方ないです。 苦肉の策ですが、、、、 なんとか教えていただいたやり方がうまくいかない原因がわかればいいのですが!

a-kuma3さんのコメント
枠の高さをうんと小さくしたらうまくいった、というのが腑に落ちないんですよね。 中の文字のフォントサイズが 30px なので、その外側は少し足して、32px とかじゃダメなんでそうか。 後、カーソルの点滅って、jsFiddle の方では点滅して見えるんですよね? 高さを 6px に詰めてるから、枠の外にアンダースコアがあって見えてないだけだと思うんですけど。

kajironpuさんのコメント
ありがとうございます。 height と width を消したり、値を替えたりいろいろ試しているのですがやはり表示されないです。たしかに、/DIVの位置を変えるとタイプした文字の真下には出てくるのでやはり見えてない?だけの可能性がありますよね。下に表示させている他の枠などのマージンの値を見たり、いろいろいじくって試しているのですが、まだ原因がわかりません。jsfiddleのほうはカーソルばっちり見えています。

a-kuma3さんのコメント
DIV.input や SPAN.cursor に試しに border: 1px solid red; してみると位置が分かりやすいです。 Firefox でしたっけ? インスペクタ (ctrl + shift + i) を使うという手もあります。

kajironpuさんのコメント
ありがとうございます。さっそく試した見ましたところ、どうやら、カーソルは最初出ていますが 文字をタイプしたと同時に消えてしまいます。 そして、いろいろ確認したところ、HTML出力用関数というところなのですが 自分のものは、下のようになっております。 >|| document.getElementById(layName).textContent=html ||< 以前、作成して頂いたように >|| document.getElementById(layName).firstChild.innerHTML=html ||< にしてみますと、なぜか文字は表示されません。 これが原因なのでしょうか?

a-kuma3さんのコメント
>|| document.getElementById(layName).textContent=html ||< これだと、カーソルは消えちゃいますね。 そちらのがどうなってるか分かりませんが、 [https://jsfiddle.net/a_kuma3/t39ocLLa/3/:title=jsFiddle に書いたの]だと、要素はこんな階層になってます。 >|| <div class="input" id="inputbox"> 答えの枠 <span class="input"> 入力した文字が入るところ <span class="cursor"> カーソル ||< >|| document.getElementById(layName).textContent=html ||< これは、id="inputbox" の内容(テキスト)を置き換えるということなので、実行すると >|| <div class="input" id="inputbox"> 答えの枠 入力した文字 ||< というように、子供の SPAN の要素が消えてしまいます。 なので、そこに含まれていたカーソルも消えます。 >> 以前、作成して頂いたように >|| document.getElementById(layName).firstChild.innerHTML=html ||< にしてみますと、なぜか文字は表示されません。 << ぼくが要素の構造を決め打ちで書いてしまっているので、そちらの要素の構造がこうなってないのだと思います。 >|| document.getElementById(layName) : id="inputbox" の DIV document.getElementById(layName).firstChild : 上記の最初の子供の要素 ||< 構造を当てにするよりも、id で直接指定した方が紛れがないので、文字が入る &lt;span class="input"&gt; にも id を指定して、そこを狙って文字を設定した方が良いと思います。 (HTML) >|| <div class="input" id="inputbox" ><span class="input" id="inputbox_inner" style="color:orange; font-size:30px;font-weight:900"></span> <!-- ★ ↑に id を指定する --> <span class="cursor">_</span> </div> ||< (javascript) >|| // outputLAYER('inputbox',inpwd) outputLAYER('inputbox_inner',inpwd); // ★内側の SPAN の方を指定 ... function outputLAYER(layName,html){ ... // ★こっちは、textContent のままで OK document.getElementById(layName).textContent=html ||< jsFiddle の方も、それにならって変更してみました。 https://jsfiddle.net/a_kuma3/t39ocLLa/4/

kajironpuさんのコメント
ありがとうございます。見事にうまくいきました! 是非、もう1つ教えて下さい。 エンターをおした時に、正解の判定をするのですが、そのときタイプした文字を、カーソルを含めて画面から消したいのですが、 >|| $("inputbox").innerHTML =""; ||< なかなかうまくいきません。 このやり方あっていますでしょうか?

a-kuma3さんのコメント
>> 是非、もう1つ教えて下さい。 エンターをおした時に、正解の判定をするのですが、そのときタイプした文字を、カーソルを含めて画面から消したいのですが、 << お、jQuery も使ってますか。 jQuery を使うなら、こんな感じ。 >|| $("#inputbox").text(""); ||< jQuery は CSS のセレクタで指定するので、id 指定なら # をつけます。 返ってくるのは HTML の要素オブジェクトではないので、jQuery のメソッドを使って操作します。 同じことを素の DOM でやるならこう。 >|| document.getElementById("inputbox").textContent = ""; ||< ただ、両方ともカーソルを持っている要素ごとバッサリ消すので、回答枠の下にある文字がずれるかも。 回答枠の高さをカチット決めてあれば、ずれないかもしれません。

kajironpuさんのコメント
とても勉強になりました。どうもありがとうございます!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ