javelover回答ポイントなし

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

こちらのサイトを参考に
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>'

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

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

ログインして回答する

ベストアンサー

a-kuma32015/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/

フォーカスの移動がうまくいってないので、一度ウィンドウの中をマウスでクリックしてから確認してみてください。
スター
- 5件のコメントを見る
- javelover 2015/10/14 14:09:55
  
  a-kuma3さん、いつもありがとうございます。１つ１つ、内容確認しています。
  いろいろ変更点があったので、ゆっくり確認しています。
  
  https://jsfiddle.net/a_kuma3/y6bpu7ku/embedded/result/
  
  Jsfiddleのほうですが、バックスペースが反応しないようです。
  原因はわかりますでしょうか？
  あと、Jsfiddleで、htmlと、javascript, CSSの全体が見えるような形で
  確認することはできますでしょうか。
  
  スター
- a-kuma3 2015/10/14 15:23:24
  
  あと、Jsfiddleで、htmlと、javascript, CSSの全体が見えるような形で
  確認することはできますでしょうか。
  元のソースを少しいじって、html、javascript、css の三つのペインに分けてコードを書きました。
  こちらから確認してください。
  https://jsfiddle.net/a_kuma3/y6bpu7ku/1/
  
  Jsfiddleのほうですが、バックスペースが反応しないようです。
  原因はわかりますでしょうか？
  普通に文字は入力できるけど、バックスペースが効かないのですか？
  左下の方に押したキーのキーコードを表示するように、コードを追加しました。
  外付けのテンキーとかについているバックスペースだとキーコードが「8」じゃないかもしれませんので、確認してみてください。
  
  もし、バックスペースだけではなく普通の文字も受け付けないのであれば、フォーカスの移動がうまくいってないからです。
  一度、フレームをクリックしてから試してみてください。
  
  スター
- javelover 2015/10/19 12:57:11
  
  a-kuma3さんお返事が遅くなり大変申し訳ありませんでした。
  その後、確認したところ、どうやら、自分の使っているノートPCが原因のようです。
  バックスペースキーを押しても、なぜか反応せず、またキーコードも表示されませんでした。
  別のデスクトップPCで確認したところ、問題なく動作しました。
  確認不足で、本当に、申し訳ありませんでした。
  いろいろ勉強させて頂いております。今後共宜しくお願いします。
  
  スター
- javelover 2015/10/19 13:00:36
  
  追伸　ノートパッドなどで、文字を消すときバックスペースは問題なく動いております。
  今、確認したところ、なぜか、google chromeでは、jsfiddle上でバックスペースがききません。
  Firefoxでは問題なく動作しました。
  
  スター
- a-kuma3 2015/10/19 16:14:26
  
  あ、なるほど。
  jsfiddle も、バックスペースのデフォルトの動作が効いちゃうとかなり悲しい思いをすることになるので、制御はしてるでしょうが、Chrome と Firefox で動作が違うんですね。
  
  スター