キーボードを押した文字を順番に画面に表示させています。キーボードのバックスペースをおした時、入力した文字を1つ消したいのですが、そのやり方がわかりません。

こちらのサイトを参考に
http://game.guide.withabout.net/guide_game/gp333/about/s/part2/w/w03/w03_6.htm
キーをおした文字(英単語)を順番に画面に表示させています。

順番に押したキーを、↓のように連続で表示させています。
inpwd += '<span class="答えの枠"'
inpwd += ' style="color:orange; '
inpwd += ' font-size:30px;font-weight:900">'
inpwd += String.fromCharCode(getKEYCODE(e))
inpwd += '</span>'

キーボードのバックスペースをおした時(つまりキー入力を間違った時)、入力した文字を1つ消したいのですが
if(getKEYCODE(e) == '8'){ inpwd -=' '}
などとやってみたのですが、だめでした。(入力した文字を1つ消したい)

また、文字を入力するところに常にカーソルの点滅を出したいのですが、↑のようなやり方では
難しいでしょうか? 
ブラウザは、firefoxです。アドバイス頂けたら幸いです。宜しくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2015/10/14 11:40:40
  • 終了:2015/10/21 11:45:04

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4624ベストアンサー獲得回数19592015/10/14 12:59:39

文字を消すには、String#substring を使って末尾の一文字を消します。
key_Press 関数をこんな感じにします。

  function key_Press(e){

    var ret = true;                 // ★
    var keycode = getKEYCODE(e);    // ★ getKEYCODE は一回だけ呼ぶ
    if(keycode == '13'){            // ★ 変数を参照

      inpwd += '<BR>'        //13なら改行する

    } else if(keycode == 8){        // ★ BS なら一文字消す
      inpwd = inpwd.substring(0, inpwd.length - 1);
      ret = false;                  // ★ 「戻る」を無効にする

    } else {
      inpwd += String.fromCharCode(keycode) // ★修飾無しの文字だけ
    }
    outputLAYER('inputbox',inpwd)

    return ret; // ★「戻る」を無効にする
  }

元のソースをなるべく残しましたが、却って分かりにくくなったかも。
バックスペースには、前のページに戻る、という元々の動作があるので、key_Press 関数の戻り値で false を返して、元の動作を無効にしています。

修飾用のタグが入ると邪魔くさいので、スクリプトから HTML の方に移動しました。
その関係で、outputLAYER 関数も、少し変えてます

  function outputLAYER(layName,html){

    if(document.getElementById){       //N6,Moz,IE5,IE6用
      document.getElementById(layName).firstChild.innerHTML=html
                                // ★  ↑firstChild が入ります

HTML は、こんな感じです。

<!--このレイヤ-の中へ文字を出力します-->
<div class="input" id="inputbox"
     style = " position : absolute        ;
               left : 100px ; top : 100px ;
      "><span class="input" style="color:orange; font-size:30px;font-weight:900"></span>
      <!-- ★ 文字の修飾は、こっちに持ってきた -->

      <span class="cursor">_</span></div>
      <!-- ★ カーソル用 -->

文字修飾用の SPAN の後に、もうひとつカーソル用の SPAN を追加しました。
アンダースコアが入ってます。
点滅は、CSS のアニメーションでやります(他にも、方法はあります)。

<style>
/* ★カーソルの点滅用 */
.cursor {
    font-size: 30px;
    color: green;
    animation-name: blink;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes blink {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
</style>

緑色のアンダースコアが 1秒周期で点滅するようにしました。


参考にしているページに上記の変更を加えたものを jsFiddle に置きました。
https://jsfiddle.net/a_kuma3/y6bpu7ku/embedded/result/

フォーカスの移動がうまくいってないので、一度 ウィンドウの中をマウスでクリックしてから確認してみてください。

他3件のコメントを見る
id:kajironpu

追伸 ノートパッドなどで、文字を消すときバックスペースは問題なく動いております。
今、確認したところ、なぜか、google chromeでは、jsfiddle上でバックスペースがききません。
Firefoxでは問題なく動作しました。

2015/10/19 13:00:36
id:a-kuma3

あ、なるほど。
jsfiddle も、バックスペースのデフォルトの動作が効いちゃうとかなり悲しい思いをすることになるので、制御はしてるでしょうが、Chrome と Firefox で動作が違うんですね。

2015/10/19 16:14:26

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

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

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

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

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