
http://oshiete1.goo.ne.jp/qa2734284.html
を見たのですが、よく、分かりません。
簡単な電卓を作っていて、
テキストボックス内で、「backspace」ボタンを押すと、
文字が後ろから、一個ずつ、減っていくようにしたい。
javascriptどういう数式を書けば、
文字数を一個減らした文字列を代入できるのか、分かりません。
方法を教えてください。
No.2ベストアンサー
- 回答日時:
こんな感じでどうでしょうか?
// キー入力を掴むイベントハンドラ
document.onkeydown = function () {
// 押されたキーコードが0x08(BackSpace)の時かつ、
// テキストフィールドにフォーカスが当たっていない場合
if (event.keyCode == 0x08 && event.srcElement.type != "text") {
// BackSpaceキーを押された時の処理
pushBackSpase();
// BackSpaceキーの処理(前ページへ遷移)を無効とする
return false;
}
}
function pushBackSpase(){
// 末尾1文字削除して挿入
document.f.into.value=document.f.into.value.substr(0, document.f.into.value.length - 1);
}
この回答への補足
自分の考えていたものよりも、画期的なものでした。
間違えた所に、マウスをあわせて、その一つなら、削除できるのが、
すごかったです。
「Backspace」ボタンを押すと、一番後ろの文字が削除されると、
いうのが、自分の考えだったのですが…
キーボードの「Backspace」キーで
自然な動きが出来るほうが、いいと、思いました。
これ以上の議論は、自分のjavascriptの勉強不足もあるし、
おおやけの議論としては、達したと考えて、解決としたいと思います。
t_wadaさん、他のなやんでくれた方々、ありがとうございます。
No.1
- 回答日時:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>サンプル</title>
</head>
<body>
<!-- 赤い部分に入力。テキストボックスからフォーカスが無くなった時一文字減らした文字列を代入するようにした-->
<p><input type="text" onBlur="this.value = this.value.substring(0,this.value.length - 1)" value="" style="background-color:red;" /></p>
</bodpy>
</html>
この回答への補足
<html>
<head>
<title>電卓</title>
<script type="text/javascript">
<!--
function push(alpha){
document.f.into.value=document.f.into.value+alpha;
}
//-->
</script>
<script language="JavaScript">
<!--
function calc() {
f.ans.value = eval(f.into.value);
}
// -->
</script>
</head>
<body>
<form name="f">
計算式:<br>
<input type="text" name="into" size="40" style="font-size:20; text-indent:20;"><br><br>
<input type="button" value=" 1 " style="height:30; width:30; font-size:20;" onClick="push('1')">
<input type="button" value=" 2 " style="height:30; width:30; font-size:20;" onClick="push('2')">
<input type="button" value=" 3 " style="height:30; width:30; font-size:20;" onClick="push('3')">
<input type="button" value=" 4 " style="height:30; width:30; font-size:20;" onClick="push('4')">
<input type="button" value=" 5 " style="height:30; width:30; font-size:20;" onClick="push('5')"><br>
<input type="button" value=" 6 " style="height:30; width:30; font-size:20;" onClick="push('6')">
<input type="button" value=" 7 " style="height:30; width:30; font-size:20;" onClick="push('7')">
<input type="button" value=" 8 " style="height:30; width:30; font-size:20;" onClick="push('8')">
<input type="button" value=" 9 " style="height:30; width:30; font-size:20;" onClick="push('9')">
<input type="button" value=" 0 " style="height:30; width:30; font-size:20;" onClick="push('0')"><br>
<input type="button" value=" + " style="height:30; width:30; font-size:20;" onClick="push('+')">
<input type="button" value=" - " style="height:30; width:30; font-size:20;" onClick="push('-')">
<input type="button" value=" * " style="height:30; width:30; font-size:20;" onClick="push('*')">
<input type="button" value=" / " style="height:30; width:30; font-size:20;" onClick="push('/')">
<input type="button" value=" . " style="height:30; width:30; font-size:20;" onClick="push('.')">
<input type="button" value=" ( " style="height:30; width:30; font-size:20;" onClick="push('(')">
<input type="button" value=" ) " style="height:30; width:30; font-size:20;" onClick="push(')')">
<br>
<br>
計算結果:<br>
<input type="text" name="ans" size="40" style="font-size:20; text-indent:20;"><br>
<br>
<input type="button" value="計算" style="height:30; width:100;" onClick="calc()"><br>
<br>
<input type="reset" value="リセット" style="height:30; width:100;"><br>
</form>
</body>
</html>
で、場合によってはエラーが出るんですが、
xhtmlとか、難しいのは使わなくて、
上のテキストボックスを打ち損じた時に、「backspace」ボタンで、
訂正できるようにしたいと思って、質問しています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
onclickが動作しない
-
innerHTML内では改行は禁止?
-
JavaScriptのfileオブジェクト...
-
fileUploadオブジェクトへの値...
-
return trueとreturn falseの用...
-
Selectボックスの幅を自動で広...
-
RegularExpressionValidatorの...
-
クリックされた罫表セルの行番...
-
チェックボックス付きのテーブ...
-
ASP.NETでNAME属性を固定にしたい
-
JavaScript ログアウト処理
-
【jQuery】input nameの文字列...
-
sessionの値でボタンを活性・非...
-
ラジオボタンにタブインデック...
-
submitした値を返したい
-
JavaScriptによる自動計算フォ...
-
setIntervalの間隔を途中で変更...
-
selectを変更不可にしたい
-
プルダウン 項目が多いので先頭...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
javaScriptの変数をJavaの変数...
-
VB.NETで<Input>タグ、<text...
-
iOSのみダブルタップが必要
-
JavaScriptのfileオブジェクト...
-
追加ボタンを押した際に ok ボ...
-
onClickがinput type="image"だ...
-
innerHTML内では改行は禁止?
-
javascriptでチェックボックス...
-
パラメータから取得した文字をH...
-
クリックさせたいが、click()が...
-
JSPファイルにJavaScriptを埋め...
-
ボタンで配列に代入
-
任意の<DIV></DIV>の中に計算結...
-
javascript教えてください
-
WordpressのCocoonというテーマ...
-
ボタンかリンクをクリックする...
-
HTMLのテキストボックスへのド...
-
onclickが動作しない
-
複数のボタンに対するActionと...
おすすめ情報