基本的に私が行う必要があるのは、スペースバーのkeydownイベントを検出して、javascriptファイル内のロジックに基づいてロジックを実行することです。単一のkeydownでトリガーされた不要な複数のKeyDownイベント
私のhtmlで見ることができるように、メッセージコンテナが表示されているをクリックすると「作成」ボタンがあります。
今は受信者のメールIDをタグとして変換する機能を実装する必要がありますが、私の場合は、スペースバーを押すとすぐに有効なメールIDがタグに変換されます。スペースバーに有効なEメールIDがないかチェックされます。
私は受信者コンテナのオンクリック機能とスペースバーのkeydown機能を記述しました。
ここに問題があります。ページが初めて読み込まれると、完全に正常に動作します。私は受信ボックスの中をクリックし、スペースバーを押すとすぐに、「スペースバーが押された」というメッセージがブラウザのコンソールに表示され、1つのキーが押される。
「閉じる」ボタンをクリックしてこのメッセージコンテナdivを非表示にしてから、「作成」ボタンをクリックしてメッセージコンテナdivを再度表示し、受信者ボックスをクリックすると、スペースバーの2つのキーダウンイベント、すなわち「スペースバーが押された」が2回印刷されます。
そして、再び閉じてもう一度クリックすると、スペースバーのすべてのキーダウンに3回「スペースバーが押された」と表示されます。
イベントのバインディングやバインド解除などに関連するものはありますか？私はキーダウンイベントが何度も拘束されている同様のリンクを辿りましたが、「閉じる」ボタンをクリックしてイベントを終了させる方法を実際に理解することができます。ここで
はhtmlです：
<!DOCTYPE html>
<html>
<head>
<title>ZMail</title>
<link rel="stylesheet" type="text/css" href="css/fonts.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="header">
<h2>ZMail</h2>
</div>
<div class="body-container">
<button type="button" class="compose-button" id="compose-button">Compose</button>
<div class="message-container" id="message-container">
<div class="compose-form-header">
<p> New Message </p>
<button type="button" class="close-button" id="close-button">x</button>
</div>
<form id="compose-form" method="POST" action="">
<div class="recipient-container" id="recipient-container">
<div class="to-box" id="to-box">
<p>To</p>
</div>
<div class="input-elements-container" id="input-elements-container">
<input type="text" id="recipient-box" name="recipients" placeholder="Recipients">
</div>
</div>
<input type="text" id="subject-box" name="subject" placeholder="Subject">
<textarea form="compose-form" id="message-text-box" name="message-text" ></textarea>
<div class="send-button-container">
<button type="submit" class="send-mail-button" id="send-mail-button">Send</button>
</div>
</form>
</div>
</div>
</body>
そしてここでは、JS
var contacts = ['[email protected]']
$(document).on('ready', function(){
$("#message-container").hide();
$("#to-box").hide();
$("#compose-button").click(function (event) {
if($("#message-container").is(':hidden')){
$(function() {
$("#recipient-box").autocomplete({
source: contacts
});
});
$("#message-container").show();
}
});
$("#close-button").click(function (event) {
$("#message-container").hide();
$("#to-box").hide();
$("#recipient-box").val('');
$("#subject-box").val('');
$("#recipient-box").attr('placeholder', 'Recipients');
$("#subject-box").attr('placeholder', 'Subject');
});
$("#recipient-container").click(function (event) {
console.log("recipients clicked");
$("#to-box").show();
$("#recipient-box").attr('placeholder', '');
$(document).keydown(function(e) {
if (e.keyCode == 32) {
console.log("spacebar pressed!!");
}
});
});
$("#subject-box").click(function (event) {
$(this).attr('placeholder', '');
});
});
あるすべてのヘルプは理解されるであろう。
ありがとうございます。出来た –