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

キーボードを押した文字を順番に画面に表示させています。キーボードのバックスペースをおした時、入力した文字を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です。アドバイス頂けたら幸いです。宜しくお願いします。

●質問者: kajironpu
●カテゴリ:コンピュータ
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

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

文字を消すには、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/

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


kajironpuさんのコメント
a-kuma3さん、いつもありがとうございます。1つ1つ、内容確認しています。 いろいろ変更点があったので、ゆっくり確認しています。 https://jsfiddle.net/a_kuma3/y6bpu7ku/embedded/result/ Jsfiddleのほうですが、バックスペースが反応しないようです。 原因はわかりますでしょうか? あと、Jsfiddleで、htmlと、javascript, CSSの全体が見えるような形で 確認することはできますでしょうか。

a-kuma3さんのコメント
>> あと、Jsfiddleで、htmlと、javascript, CSSの全体が見えるような形で 確認することはできますでしょうか。 << 元のソースを少しいじって、html、javascript、css の三つのペインに分けてコードを書きました。 こちらから確認してください。 https://jsfiddle.net/a_kuma3/y6bpu7ku/1/ >> Jsfiddleのほうですが、バックスペースが反応しないようです。 原因はわかりますでしょうか? << 普通に文字は入力できるけど、バックスペースが効かないのですか? 左下の方に押したキーのキーコードを表示するように、コードを追加しました。 外付けのテンキーとかについているバックスペースだとキーコードが「8」じゃないかもしれませんので、確認してみてください。 もし、バックスペースだけではなく普通の文字も受け付けないのであれば、フォーカスの移動がうまくいってないからです。 一度、フレームをクリックしてから試してみてください。

kajironpuさんのコメント
a-kuma3さん お返事が遅くなり大変申し訳ありませんでした。 その後、確認したところ、どうやら、自分の使っているノートPCが原因のようです。 バックスペースキーを押しても、なぜか反応せず、またキーコードも表示されませんでした。 別のデスクトップPCで確認したところ、問題なく動作しました。 確認不足で、本当に、申し訳ありませんでした。 いろいろ勉強させて頂いております。今後共宜しくお願いします。

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

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

●質問をもっと探す●



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