J'ai conçu une petite application d'une seule page, un mini salon de discussion.
Dès que vous entrez, il y a un écran noir, puis il y a un petit panneau où vous devez entrer votre nom. À côté se trouve un bouton pour confirmer (le premier. (appui sur la touche). Après confirmation, l'écran noir et le panneau disparaissent et vous entrez dans la page. La page est une salle de discussion, qui déclenche Entrée pour envoyer un message (la deuxième pression sur une touche).
Le problème maintenant est que lorsque vous entrez dans le panneau de nom, appuyer sur Entrée déclenchera les deux touches ci-dessus en même temps. Mais les sélecteurs liés à mes deux touches sont différents.
P.S. En HTML, le type des deux boutons est bouton.
S'il vous plaît, donnez-moi votre réponse, merci beaucoup.
Code :
//get username function getUsername(){ blackScreen.fadeOut("slow"); return $("#input-username").val(); } okay.click(getUsername); //send msg to database by enter formUsername.keypress(function(event) { if(event.keyCode === 13) { event.preventDefault(); okay.trigger("click"); } }); //get time function getTime() { var mydate = new Date(); var year = mydate.getFullYear(); var month = mydate.getMonth() + 1; var day = mydate.getDate(); var hour = mydate.getHours(); var minute = mydate.getMinutes(); var second = mydate.getSeconds(); //standardize time function stdTime(s) { if(s < 10) { return "0" + s; } else { return s; } }; return year + "/" + stdTime(month) + "/" + stdTime(day) + " " + stdTime(hour) + ":" + stdTime(minute) + ":" + stdTime(second); } //send msg to database by click inputBtn.click(function() { var inputMsg = $("#input-value").val(); //push msg to database msgs.push({ "name": getUsername(), "time": getTime(), "msg": inputMsg }); $("#input-value").val(""); }); //send msg to database by enter inputForm.keypress(function(event) { if(event.keyCode === 13) { event.preventDefault(); inputBtn.trigger("click"); } });
Ajoutez le code pour les deux parties de boutons du html :
<div class="chat-room-input"> <form class="form-inline form-input"> <div class="form-group"> <input type="text" class="form-control" id="input-value" placeholder="来一起吐槽~" maxlength="80"> <button type="button" class="btn btn-default" id="input-send"> <span class="glyphicon glyphicon-send" aria-hidden="true"></span> </button> </div> </form> </div> <div class="alert alert-warning alert-dismissible" role="alert"> <form class="form-inline form-username"> <div class="form-group"> <input type="text" class="form-control" id="input-username" placeholder="骚年!留下大名!" maxlength="10" autofocus="autofocus"> <button type="button" class="btn btn-default okay">OK</button> </div> </form> </div>
formUsername.keypress(function(event) { if(event.keyCode === 13) { event.preventDefault(); okay.trigger("click"); } event.stopImmediatePropagation(); });
formUsername.keypress(function(event) { event.stopPropagation(); //防止事件冒泡 if(event.keyCode === 13) { event.preventDefault(); okay.trigger("click"); } }); inputForm.keypress(function(event) { event.stopPropagation();//防止事件冒泡 if(event.keyCode === 13) { event.preventDefault(); inputBtn.trigger("click"); } });
J'ai trouvé la réponse, juste soumettez-le Ajoutez simplement event.stopImmediatePropagation(); à l'événement enter du nom d'utilisateur Merci de m'avoir donné l'idée.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!