質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

5028閲覧

inputテキストフィールドをクリアしたい

tieat

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2015/03/13 20:05

inputテキストフィールド入力しているときに、ある文字を入力すると今までの入力がすべて消されて、text入力欄がまっさらになるようにするにはどうしたらいいのでしょうか?
テキストフィールドを消すために打ったある文字がtext欄に残ってしまいどうしたものかと...。
★印のところの処理を困っております。
よろしければ、ご回答お待ちしております。よろしくお願いします。

lang

1<html> 2<head> 3<link rel="stylesheet" type="text/css" href="style.css"> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5<title></title> 6<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 7<script type="text/javascript"> 8 9i=0; 10ichi=0; 11input=""; 12//読み込まれたときに実行される関数 13window.onload= function() { 14 15 //テキスト欄に入力された配列 16 ro_maword="but that was only true for the people who"; //文章 17 ro_malist=new Array(); //文章をsplitで区切ったやつを入れる配列 18 ro_malist=ro_maword.split(" "); //文章をスペースで区切って、配列ro_malisitに入れる 19 ro_ma=""; 20 21 //inputフィールドで入力されたら始まるcheckword()関数を定義 22 $("#inputcontent").keypress(function(event){ 23 ro_ma=ro_malist[i]; 24 checkword(); 25 }); 26 27 28 //ぶつ切りした単語の一文字が入力された文字とあっているかどうか判断する関数 29 function checkword(){ 30 if(ro_ma.charAt(ichi)==String.fromCharCode(event.keyCode)){ 31 seikai(); 32 }else{ 33 machigai(); 34 } 35 } 36 //正解したら 37 function seikai(){ 38 input+=String.fromCharCode(event.keyCode); //input=["b"] 39 $("#inputcontent").val(input.substr(0, input.length - 1)); 40 ichi++; 41 if(ichi==ro_malist[i].length){ 42 document.getElementById("scriptcontent").innerHTML+=ro_ma+" "; 43 empty(); 44 i++; 45 if(i==ro_malist.length){ 46 alert("成功!"); 47 } 48 49 } 50 } 51 //間違ったら 52 function machigai(){ 53 $("#inputcontent").val(input); 54 55 } 56 57 58 function empty(){ 59 input=""; 60 ichi=0; 61 $("#inputcontent").val(""); //★ここでinput text欄を空にしたいと思っているが直前の入力が残ってしまう 62 63 } 64 65} 66 67 68</script> 69</head> 70 71 72<body> 73<div id="main"> 74 <header> 75 <font size="5">出た文字列をタイピングする</font> 76 </header> 77 78 <iframe frameborder="0" height="800" scrolling="no" src="http://ttfaloopandrepeat.appspot.com/showVideo.html?st=120&et=125&vId=RcGyVTAoXEU&l=yes&lnf=10&ap=no" width="100%">your browser does not support IFRAMEs</iframe> 79 80 <div id="scriptcontent"></div> 81 82 <div class="inputfield"> 83 <input type="text" name="inputcontent" id="inputcontent" style="font-size:2em;" /> 84 </div> 85 86 87</div> 88 89</body> 90</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

http://jsdo.it/katoy/vyT3
に少し書き換えたものを置いてみました。
del, backspace キーの入力にも対応させてみました。

投稿2015/03/14 02:04

katoy

総合スコア22324

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tieat

2015/03/14 11:15

回答ありがとうございます!引数の使い方とかまだよくわかっていないので、ソース非常に参考になります!delやbackspaceも本当にありがとうございます;-;
guest

0

ベストアンサー

$("#inputcontent").keypress(function(event)メソッドに対して、falseをreturnすれば、入力文字が無効になります。それぞれ分けているメソッドを一つにまとめるか、フラグなどをもたせcheckword();処理後にreturnすると良いと思います。個人的には、コード量も多くないので、まとめた方が可読性も上がると思います。
本件とは関係ありませんが、Firefoxだと、現状のコードでは機能しませんので、他ブラウザでの対応も考慮してみてください。

投稿2015/03/13 22:36

bm000999

総合スコア57

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tieat

2015/03/14 01:31

はじめての質問でしたがこんなにも早く回答していただき本当にありがたいです!うまく動きました!Firefoxへの対応も調べてやってみます!ご指摘ありがとうございます!本当にありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問