Question

我有一个带有三个文本框的表单。我希望每个人都有一个关键事件，无论他们先进入哪一个。以下是我的代码：

function showQuoteBox() {
var overlay = '<div id="overlay"></div>';
var quoteBox = '<form id="quoteForm" action="#"><h1>Get a quote from <INSTALLERS NAME></h1><fieldset id="user-details"><label for="inName">Name:</label><input type="text" id="inName" name="name" value="" /><label for="email">Email:</label><input type="email" id="inEmail" name="email" value=""  /><label for="phone">Phone:</label><input type="text" id="inPhone" name"phone" value=""  /><input type="submit" value="Get quote!" name="submit" class="submit" /></fieldset><div id="sent-details"><span id="nameText"><span id="emailText"><span id="phoneText"></span></div></form>'
jQuery(overlay).appendTo('body');
jQuery(quoteBox).appendTo('body');
jQuery(document).ready(function() {
    jQuery('#inName').keyup(function(){
        jQuery('#nameText').html(jQuery(this).val());
    });
    jQuery('#inEmail').keyup(function(){
        jQuery('#emailText').html(jQuery(this).val());
    });
    jQuery('#inPhone').keyup(function(){
        jQuery('#phoneText').html(jQuery(this).val());
    });
});
}

window.onkeyup = function (event) {
   if (event.keyCode == 27) {
      jQuery('#overlay').remove();
      jQuery('#quoteForm').remove();
   }
}

上面是单击按钮时调用的整个函数。它显示带有三个输入的quoteBox。每个输入框都允许我输入文本，但它只会更新已输入的第一个输入区域。如果任何其他文本框中包含值，则所有其他文本框都不会更新。

如果我选择先输入一封电子邮件，它会显示在该范围内，但是当我在任何其他文本框中输入一个值时，它就不会听。

Answer 1

您描述的行为 - 其中只有一个键盘似乎正常工作 - 很可能是因为您已将3个SPANS嵌入其中！

<div id="sent-details">
    <span id="nameText">
        <span id="emailText">
            <span id="phoneText"></span>
</div>

不仅如此，我还没有看到它们被关闭。 SPAN标签不是自动关闭的，每个浏览器都会尝试以不同的方式自我纠正或解释。有些浏览器可能会尝试为您关闭它们。

因此，您的第一个按键事件要么覆盖其他2个SPAN元素，要么JavaScript无法找到元素，因为您的HTML无效。

HTML的正确语法是：

var quoteBox = '<form id="quoteForm" action="#">' +
  '<h1>Get a quote from <INSTALLERS NAME></h1>'+
  '<fieldset id="user-details">'+
      '<label for="inName">Name:</label>'+
      '<input type="text" id="inName" name="name" value="" />'+
      '<label for="email">Email:</label>'+
      '<input type="email" id="inEmail" name="email" value=""  />'+
      '<label for="phone">Phone:</label>'+
      '<input type="text" id="inPhone" name"phone" value=""  />'+
      '<input type="submit" value="Get quote!" name="submit" class="submit" />'+
  '</fieldset>'+
  '<div id="sent-details">'+
      '<span id="nameText"></span>'+  // closed tags here
      '<span id="emailText"></span>'+ // closed tags here
      '<span id="phoneText"></span>'+ // closed tags here
  '</div></form>';

更具可持续性和可维护性的解决方案：

另外，在JavaScript变量中存储一长串HTML是一种非常不可持续的标记处理方式，因为它会导致不可读性，这导致了这些错误。相反，如果我要解决此问题，我会将此HTML放在页面上，但使用display:none隐藏它。然后，在函数showQuoteBox中，我只需使用CSS类或id选择器来取消隐藏该代码块。

由于HTML将位于HTML文档所属的位置，因此它不仅可以维护得更多，而且还可以与不想尝试对JavaScript进行反向工程的Web设计人员交朋友。

<div id="overlay" style="display:none">
    <form id="quoteForm" action="#">
        <h1>Get a quote from <INSTALLERS NAME></h1>
            <fieldset id="user-details">
                <label for="inName">Name:</label>
                <input type="text" id="inName" name="name" value="" />
                <label for="email">Email:</label>
                <input type="email" id="inEmail" name="email" value=""  />
                <label for="phone">Phone:</label>
                <input type="text" id="inPhone" name"phone" value=""  />
                <input type="submit" value="Get quote!" name="submit" class="submit" />
            </fieldset>
           <div id="sent-details">
               <span id="nameText"></span>
               <span id="emailText"></span>
               <span id="phoneText"></span>
          </div>
      </form>
  </div>

function showQuoteBox() {
     // var overlay = '<div id="overlay"></div>';  <-- don't do this
     // var quoteBox

     // instead, use jQuery to unhide your HTML and keep it out of the JavaScript
     $('overlay').show();  

     // the rest of your code follows
     ...
 }

最后，看起来您将keyup事件代码包含在函数showQuoteBox中。一旦页面完成加载并且DOM准备就绪，jQuery对象上的ready方法就会触发，因此在函数内注册该事件似乎有点奇怪。

在这种情况下，您在使用jQuery将一些DOM元素添加到已加载的页面时注册这些事件。因此，（文件）.ready不仅是不必要的，而且可能会有问题。如果按照上一节中的步骤操作后仍然遇到问题，请考虑删除document.ready包装器，如下面的代码块所示：

// don't put document.ready around this since it's in a function you're calling to show a form
jQuery('#inName').keyup(function(){
    jQuery('#nameText').html(jQuery(this).val());
});
jQuery('#inEmail').keyup(function(){
    jQuery('#emailText').html(jQuery(this).val());
});
jQuery('#inPhone').keyup(function(){
    jQuery('#phoneText').html(jQuery(this).val());
});

Answer 2

只是......做你正在做的事。只要你将它包装在$（文件）.ready

中就可以正常工作

Answer 3

由于您重复相同的行为，我认为您应该使用插件。我称之为模仿。它没有经过测试（因为没有html或jsfiddle可以搞乱），但它应该可以解决问题。

(function($) {
    $.fn.mimic = function(selector) {
        var $elementToMimic = $(selector);

        $.each(this, setupMimicEvents);

        function setupMimicEvents() {
            var $mimicer = $(this);

            $elementToMimic.on('keyup', mimicElement);

            function mimicElement() {
                var value = $elementToMimic.val();
                $mimicer.html(value);
            }
        } 

        return this;
    }
})(jQuery)

jQuery(function() {
    jQuery('#nameText').mimic('#inName');
    jQuery('#phoneText').mimic('#inPhone');
});

另外

如果您打算使用jQuery，那么也可以将它用于身体上的事件。我不确定你究竟要做的是什么，但似乎有点过时了。

如何在一个页面上有多个jQuery（''）。keyup

3 个答案:

另外