Javascript 动态窗口。查找不使用jQuery_Javascript_Jquery_Dom

Javascript 动态窗口。查找不使用jQuery

javascript jquery dom

Javascript 动态窗口。查找不使用jQuery,javascript,jquery,dom,Javascript,Jquery,Dom,我一辈子都搞不明白为什么这不管用我想使用搜索框搜索当前页面中的文本。我在谷歌上找到了这个：。我在我的站点中实现了代码，但它不起作用。函数（findString（））可以工作，但只有在我硬编码字符串时（例如，我不能使用javascript或jquery获取文本输入的值）。我做了这把小提琴：来说明这个问题您可以取消注释不同的行，以查看我测试的内容。jQuery有一种方法，可以简化您要查找的内容请看这里：在firefox中，我注意到问题中给出的fiddle（v4）起了作用，但不是询问者期望的方

我一辈子都搞不明白为什么这不管用

我想使用搜索框搜索当前页面中的文本。我在谷歌上找到了这个：。我在我的站点中实现了代码，但它不起作用。函数（

findString（）

）可以工作，但只有在我硬编码字符串时（例如，我不能使用javascript或jquery获取文本输入的值）。我做了这把小提琴：来说明这个问题

您可以取消注释不同的行，以查看我测试的内容。

jQuery有一种方法，可以简化您要查找的内容

请看这里：

在firefox中，我注意到问题中给出的fiddle（v4）起了作用，但不是询问者期望的方式

firefox中的情况是函数确实找到了值..：您刚刚在输入字段中输入了它。然后浏览器的

find

方法似乎挂起在输入“控件”的“上下文”中，并且没有脱离它。由于浏览器将继续从上一个激活位置进行搜索，因此如果您在输入字段后选择任何内容，则该功能将按预期工作。因此，诀窍是不要在搜索开始时“被困”在输入字段中

关于如何突破它的一个基本（肮脏）示例（不一定是正确的解决方案，也不一定是纯jquery，但可能会激发出一个有用的例程，因为您现在已经知道了FF中问题的根源）：

在FF中测试（工作）

PS：考虑到您使用

的具体示例，我确实觉得Sergio的答案将是一个更合适的解决方案，特别是因为它永远不会运行以下行：

警报（“Opera浏览器不受支持，抱歉…”）

，但正确回答您的

窗口。查找问题仍然是一个有趣的问题
PS2：如果你实际上是在使用（或复制）浏览器的搜索功能，为什么不让用户按Ctrl+F键并指示他们呢
希望这有帮助
 我找到了一个解决办法（某种程度上）。似乎需要将输入放在DOM中要搜索的内容之后。这意味着我已经做了以下工作：
<section class="content">
  <h2>Fire</h2>
  <h3>Fire Extinguishers</h3>
  <ul>
    <li>Model 240</li>
    <li>Model C352, C352TS</li>
<li>Model C354, C354TS</li>
  </ul>
  ...
  <div id="navbar">
    <ul>
      ...
    </ul>
    <input id="search" type="text" class="form-control pull-left" placeholder="Search for part number">
    <button id="submit" type="submit" class="btn btn-default pull-left" style=" margin-top:6px;">Search</button>
  </div>


火
灭火器

240型
C352型，C352TS型
C354型，C354TS型

...

...

搜寻

如您所见，我已将输入（位于navbar div中）移动到所有要搜索的文本下方，并使用CSS以编程方式将navbar放置在页面顶部。我并不特别喜欢这种设置（因为它会扰乱内容的流动），但因为我一直在寻找单页搜索的最快和最简单的实现，所以必须这样做
我仍然很想知道为什么会发生这种情况，当javascript位于它所属的DOM的末尾时…
我在angularjs应用程序中遇到了同样的问题，我通过更改DOM结构来修复它。

我的HTML代码是这样的：
<body>
       <div class="content" >
            <input class="searchInput" />
            <p>
                content ....
            </p>
       </div>
</body>

<body>
       <div class="search">
            <input class="searchInput" />
       </div>

       <div class="content">
            <p>
                content ....
            </p>
       </div>
</body>



内容。。。。


我把它改成这样：
<body>
       <div class="content" >
            <input class="searchInput" />
            <p>
                content ....
            </p>
       </div>
</body>

<body>
       <div class="search">
            <input class="searchInput" />
       </div>

       <div class="content">
            <p>
                content ....
            </p>
       </div>
</body>



内容。。。。


注意：我知道这个话题很古老
为什么不能使用javascript或jquery来获取文本输入的值呢？它根本无法使用该函数。我可以使用jquery或vanilla javascript来跟踪我想要的值，但它不能与提供的函数一起工作。我的目的是只使用浏览器的搜索功能，而不是自定义文本突出显示。愚蠢的我，我想这会更容易…我知道浏览器搜索功能也会匹配输入，我不太担心这一点。但是，如果您查看代码，它将继续查找其他匹配项（如果您一直按submit，这不是非常方便用户使用的，但我试图避免自定义文本突出显示）。RE:PS2，如果用户在按submit时注意到find窗口打开，我想我可能是在教育用户（或者，如果他们只是简单地按CTRL+F，他们与该页面上搜索的交互与交互匹配）。我担心这个网站的典型用户可能不愿意学习这样一个简单但有用的命令，或者他们自己已经学会了，或者他们根本不在乎。添加了空提交检查，并添加了我在你的问题（现在已删除）注释中给出的其余解释（但忘记复制到这个答案）.很简单，正如我在回答中所解释的。本机find从顶部（最后一个已知位置）搜索到底部。您的解决方案是在搜索结束时（底部）而不是立即在开始时（顶部）被困在inputfield中。