0

哟！

我在我的网站上实现了以下功能，它允许用户向上/向下按以流畅地滚动页面的不同部分：

// CONTROL TOP NAVBAR WITH UP/DOWN ON KEYBOARD
        $(document).keydown(function(e) {
          var p = $("li.active");
          if (e.keyCode === 38) {
          e.preventDefault();
          p.prev().find("a").click();
          } else if (e.keyCode === 40) {
          e.preventDefault();
          p.next().find('a').click();
          }
        });

这工作正常。但是，我在页面上也有一个联系表。当用户在联系表单中输入时，我希望他们能够在文本框中使用键盘向上/向下移动以正确导航。但是，它目前仍控制导航栏。

我的联系表格的 ID 为#contactform。代码在这里：

<form name="contactform" id="contactform" method="post" action="/contact/" _lpchecked="1">
    <ul class="form-block">

      <!-- HONEYPOT -->
      <li class="on-no-robots" style="height:0px; text-indent:-9999px; font-size:0px; overflow:hidden;">
        <label>Humans Don't Submit This!! If you can see this, you don't have CSS, and you scare me. This is just here to filter out automated comments!</label>
        <input name="robotest" id="robotest" type="text" />
      </li>
      <!-- HONEYPOT -->

      <li class="third">
        <label for="name">Name</label>
        <input type="text" name="name" id="name" value="" class="required" />
      </li>
      <li class="third">
        <label for="email">Email Address</label>
        <input type="email" name="email" id="email" value="" class="required email" />
      </li>
      <li class="third">
        <label for="phone">Phone Number</label>
        <input type="text" name="phone" id="phone" value="" />
      </li>
    </ul>
    <h3>How can we help you?</h3>
    <ul class="form-block">
      <li class="full">
        <textarea name="comments" id="comments" class="required"></textarea>
      </li>
      <li>
        <input id="submitButton" type="submit" value="Talk to us" />
      </li>
    </ul>
</form>

是否可以做一个条件语句说“如果#contactform#name, #contactform#email, #contactform#comments 是焦点，禁用这个功能”？

我在 jquery 方面相当糟糕，但这是我的尝试：

        $(document).keydown(function(e) {
            if ($("#contactform input", "#contactform textarea").is(":focus")){
                return;
            }

            else{
              var p = $("li.active");
              if (e.keyCode === 38) {
              e.preventDefault();
              p.prev().find("a").click();
              } else if (e.keyCode === 40) {
              e.preventDefault();
              p.next().find('a').click();
              }
            }       
        });

目前，向上/向下箭头功能可以正常工作，尽管条件语句是错误的。我在这里错过了什么？

4

3 回答 3

1

这是一个 JavaScript 例程（在此站点上使用），用于检测用户是否在文本字段中：

function inTextField(event)
{
  var elem = event.target || event.srcElement;
  if (elem.nodeType == 3)
    elem = elem.parentNode;

  return (elem.tagName == "TEXTAREA" ||
          (elem.tagName == "INPUT" && (elem.getAttribute("type") == "text")));
}

它可以通过使用 jQuery 语法来改进，但即使是原样也应该足以让你的条件工作：

if (inTextField(e)){
    return;
}
...
于 2012-07-27T05:06:21.760 回答
0

在这里，我已经完成了上述问题的完整解决方案，您可以在此处查看演示链接。

演示： http ://codebins.com/bin/4ldqp9f

注意：如果您检查代码箱上的输出，一旦加载页面，然后首先单击输出区域上的任意位置，以便脚本将检测文档键按下事件。

HTML：

<ul class="menu">
  <li class="active">
    <a href="#">
      Menu1
    </a>
  </li>
  <li>
    <a href="#">
      Menu1
    </a>
  </li>
  <li>
    <a href="#">
      Menu2
    </a>
  </li>
  <li>
    <a href="#">
      Menu3
    </a>
  </li>
  <li>
    <a href="#">
      Menu4
    </a>
  </li>
</ul>
<form name="contactform" id="contactform" method="post" action="#" _lpchecked="1">
  <ul class="form-block">
    <!-- HONEYPOT -->
    <li class="on-no-robots" style="height:0px; text-indent:-9999px; font-size:0px; overflow:hidden;">
      <label>
        Humans Don't Submit This!! If you can see this, you don't have CSS, and you scare me. This is just here to filter out automated comments!
      </label>
      <input name="robotest" id="robotest" type="text"/>
    </li>
    <!-- HONEYPOT -->
    <li class="third">
      <label for="name">
        Name
      </label>
      <input type="text" name="name" id="name" value="" class="required" />
    </li>
    <li class="third">
      <label for="email">
        Email Address
      </label>
      <input type="text" name="email" id="email" value="" class="required email" />
    </li>
    <li class="third">
      <label for="phone">
        Phone Number
      </label>
      <input type="text" name="phone" id="phone" value="" />
    </li>
  </ul>
  <h3>
    How can we help you?
  </h3>
  <ul class="form-block">
    <li class="full">
      <textarea name="comments" id="comments" class="required">
      </textarea>
    </li>
    <li>
      <input id="submitButton" type="submit" value="Talk to us" />
    </li>
  </ul>
</form>

CSS：

.menu{
  list-style:none;
  padding:1px;
  display:inline-block;
  vertical-align:top;
}
.menu li{
  background:#112288;
  padding:5px;
}
.menu li:hover,.menu li.active{
  background:#1144cd;
}
.menu li a{
  color:#eee;
  text-decoration:none;
}
.menu li a:hover{
  text-decoration:underline;
}
#contactform{
  border:1px solid #223388;
  width:50%;
  background:#5888a9;
  margin-left:5px;
  display:inline-block;
}
#contactform ul{
  padding:5px;
}
#contactform h3{
  margin-left:10px;
}
#contactform li{
  list-style:none;
  margin-left:10px;
}

#contactform input[type=text],#contactform textarea{
  border:1px solid #223388;
}
#contactform input[type=text]:focus,#contactform textarea:focus{
  background:#d4c8fb;
}

查询：

$(function() {
    $(".menu li.active").click();
    $(document).keydown(function(e) {
        if (typeof(e.target.name) != "undefined" && e.target.name != "" &&   $(e.target).parents("#contactform").length > 0) {
            return false;
        } else {
            var p = $(".menu li.active");
            if (e.keyCode === 38) {
                e.preventDefault();
                p.prev().find("a").click();
            } else if (e.keyCode === 40) {
                e.preventDefault();
                p.next().find('a').click();
            }
        }
    });

    $(".menu li").click(function() {
        $(".menu li").removeClass("active");
        $(this).addClass("active");
    });
});

演示： http ://codebins.com/bin/4ldqp9f

于 2012-07-27T07:33:57.097 回答
0

下面的呢？

if($("#contactform input").is(':focus') || $("#contactform textarea").is(':focus')) {
    e.preventDefault();
    return false;
}

演示

于 2012-07-27T04:53:10.367 回答