下記のコードでは、inputフォーム上でカーソルを置き、[Alt]+ [z] キーを押したときに、「Hello」という文字列が入力されるようにしました。
実装面では、[Alt]+ [z] キーを押したときに、カーソルがある部分のclassの値を取得し、その部分を.val()で取得、書き換えを行っています。ただ問題がありまして、classの値で取得しているので、valで書き換える時に、全てのclass値をもつinputのvalueの値が書き換わってしまいます。classではなくidを取得するように変更すれば解決しますが、どうしてもclassの値で取得したいのですけど、解決策はありますでしょうか?
(私が書いたJavascriptのコード自体、これが効率よいのか自信がないので、効率的な書き方がありましたらアドバイスください。)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.1 …
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1 …
<style>
</style>
<script>
$(function() {
function KeyDownFunc(e){
if(true == e.altKey && 90 == e.keyCode){
var element =document.activeElement
if(element.className){
var getData = String($("." + element.className).val());
$("." + element.className).val( getData + "Hello" ).focus();
}
}
}
if(document.addEventListener){
document.addEventListener("keyup" , KeyDownFunc);
}
});
</script>
</head>
<body >
<input type="text" name="" value="test" class="sss"><br>
<input type="text" name="" value="xxx" class="sss"><br>
<input type="text" name="" value="" class="sss"><br>
</body>
</html>
No.2ベストアンサー
- 回答日時:
こんにちは
効率的かどうかはわかりませんが、ご提示の内容ならjQery無しでもたいして変わりませんね。
対象となる入力欄の特定をどう行えばよいのか不明ですが、とりあえず、
<input type="text" class="sss">
の要素に対して有効となるようにしてあります。
また、documentレベルでイベントを取得しているので、動的に上記同等の要素が追加されたりした場合でも、そのままで動作するはずです。
<script>
document.addEventListener("keydown", function(evt){
if(evt.altKey == true && evt.keyCode == 90){
var t = evt.target, c = t.classList.contains("sss");
if(t.nodeName == "INPUT" && t.type == "text" && c) t.value += "Hello";
}
}, false);
</script>
ありがとうございます。jQueryのkeydownでも実装を試しましたが、確かに、javascriptだけの方がコード量がすくなくて、見やすいです。書き方がとても勉強になります。
No.1
- 回答日時:
キーダウンイベント関数をclass名指定で、全てのテキストボックスにバインドすればいいと思います。
そうすれば、alt+zが押された時には、そのテキストボックスの関数だけが動きます。こちらのサンプルを見てみてください
http://js.studio-kingdom.com/jquery/events/keydown
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JSで一つのボタンを押したとき...
-
tabindexの取得
-
JavaScriptで作ったアプリが正...
-
HTMLとJavaScriptで作った表示...
-
テキストエリアに履歴を残したい
-
マイナスなら赤字で表示したい...
-
開いたサブウインドウから値を...
-
JavaScriptの値を、cgiに渡す方...
-
return trueとreturn falseの用...
-
javascriptの値をformのinput h...
-
shiftキーを押しながらコマンド...
-
開いた子ウィンドウにあるボタ...
-
selectのonChangeが動作しません
-
【jQuery】input nameの文字列...
-
中百舌鳥駅と深井駅を入れ替え...
-
ハイパーリンクを別ウインドウ...
-
Nameは配列で、チェックされた...
-
onchangeイベントを強制的に発...
-
引数に数値、文字列の混在
-
javascript作成してます。ラジ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLファイル同士での値渡し
-
GetElementByIdがうまく取得で...
-
tabindexの取得
-
フォームの内容でリンク先URLの...
-
TextBoxに半角数字以外を入れた...
-
ページ間で変数を保持したい
-
jQueryのdatepickerの日付が選...
-
javascriptのちょっとした動作...
-
マイナスなら赤字で表示したい...
-
プルダウンで選択された値を別...
-
JavaScript Cookieについて
-
テキストエリアに履歴を残したい
-
JavaScriptで作ったアプリが正...
-
クリック→フォーカスのある場所...
-
画像の表示非表示について質問です
-
VBscriptの配列変数をJavascrip...
-
大文字か小文字かを判断する方法
-
HTMLとJavaScriptで作った表示...
-
カーソルが当たった箇所に吹き...
-
VBSからjavascript
おすすめ情報