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;
}

JQuery：

$(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 に答える