出现onclick搜索框,尝试添加自动对焦

时间:2016-03-04 19:47:10

标签: javascript php jquery twitter-bootstrap onclick

我在home.php中有一个按钮:

<p><button class="btn btn-lg btn-success search" onclick="search(this)">Get started today</button></p>

我使用search-box.js变成了一个搜索框:

var html =
'<body>\
  <div id="the-basics" class="bs-example" autofocus>\
      <input style="position: relative; vertical-align: top; background-color: transparent;" dir="auto" spellcheck="false" autocomplete="off" class="typeahead tt-input" placeholder="National Parks" type="text" autofocus>\
      <pre style="position: absolute; visibility: hidden; white-space: pre; font-family: -apple-system; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: optimizelegibility; text-transform: none;" aria-hidden="true">a</pre>\
      <div style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;" class="tt-menu tt-empty">\
      <div class="tt-dataset tt-dataset-parks">\
      </div></div>\
  </div>\
</body>';


 function search(elem) {
  elem.outerHTML = html;
 };

我一直在尝试使用另一个名为autofocus.jquery.js的文件进行自动对焦:

$(document).ready(function () {
$.autofocus();
});

无法正常工作。使用主header.html中的php echo在单独的home.php文件中导入javascript  文件。

&#13;
&#13;
var html =
    '<body>\
      <div id="the-basics" class="bs-example" autofocus>\
          <input id="box" style="position: relative; vertical-align: top; background-color: transparent;" dir="auto" spellcheck="false" autocomplete="off" class="typeahead tt-input" placeholder="National Parks" type="text" autofocus>\
          <pre style="position: absolute; visibility: hidden; white-space: pre; font-family: -apple-system; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: optimizelegibility; text-transform: none;" aria-hidden="true">a</pre>\
          <div style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;" class="tt-menu tt-empty">\
          <div class="tt-dataset tt-dataset-parks">\
          </div></div>\
      </div>\
    </body>';


function search(elem) {
      elem.outerHTML = html;
  }
&#13;
<p><button class="btn btn-lg btn-success search" onclick="search(this)">Get started today</button></p>
&#13;
&#13;
&#13;

0 个答案:

没有答案