如何在HTML页面上使用此JavaScript?

时间:2013-12-26 05:25:21

标签: javascript jquery html

所以我一直在寻求一些关于如何解决我希望如何点击按钮的问题的帮助,并让我自动选择我网站上的搜索框。

好吧,人们告诉我使用Javascript进行点击操作,我被告知使用此代码:

function setFocus() {
    document.getElementById("myTextbox").focus();
}

但我不知道如何正确地将它与我的HTML结合起来。在谷歌上看,一切都没有为我拼凑..

我的HTML:

<html>
<head>
<title>DLL Download Database</title>
<meta name="description" content="Need a .DLL file? Don't worry, I am sure we have a DLL available for you!">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript">
function setFocus() { document.getElementById("search").focus(); }
</script>
</head>
<body>
<div class="my_container cf">
    <div class="headerbuttons"><a href="http://dll-download.us/" style="text-decoration: none; color:#000000;padding:3px;display:block;"><p>HOME</p></a></div>
    <div class="headerbuttons"><a href=""style="text-decoration: none; color:#000000;padding:3px;display:block;"><p>HOW TO INSTALL</p></a></div>
    <div class="headerbuttons"><p style="text-decoration: none; color:#000000;padding:3px;display:block;" onClick="setFocus(search);">CAN'T FIND A FILE?</p></div>
    <div class="headerbuttons"><a href="http://www.dll-files.com/get-fixer/"style="text-decoration: none; color:#000000;padding:3px;display:block;"><p>DLL SOFTWARE FIXER</p></a></div>

</div>
<h2 class="homepage-start"><strong>WELCOME TO DLL DOWNLOAD.US!</strong></h2>
<div class="body-main2">
<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search for a DLL" />
</form>
</div>
</body>
</html>

5 个答案:

答案 0 :(得分:3)

请在您的HTML中进行以下更改

<强> HTML

<div class="body-main2">
<form method="get" action="/search" id="search">
    <input id="searchbox" name="q" type="text" size="40" placeholder="Search for a DLL"/>
</form>
</div>    


<div class="headerbuttons">
    <a style="text-decoration: none; 
    color:#000000;padding:3px;display:block;" onclick="setFocus();">
        <p>CAN 'T FIND A FILE?</p>
     </a>
</div>

<强>的JavaScript

<script type="text/javascript">
function setFocus() {
document.getElementById("searchbox").focus();
}</script>

它的工作正常!!!见working JSFIDDLE Demo

答案 1 :(得分:0)

尝试

onClick="javascript:setFocus();"  // no parameter

或更简单

onClick="setFocus();"  // no parameter

顺便说一下,您应该将注意力设置在输入标记而不是form上,因此请将输入标记的ID更改为id="search",当然要将其从form中删除

答案 2 :(得分:0)

而不是调用setFocus(search)

您是否尝试过只调用setFocus()

in

`<div class="headerbuttons"><p style="text-decoration: none;color:#000000;padding:3px;display:block;"
onClick="setFocus(search);">CAN'T FIND A FILE?</p></div>`

编辑:

id = search元素中移除form并将其设置在text元素上

<form method="get" action="/search" >
  <input name="q" type="text" size="40" placeholder="Search for a DLL" id="search" />
</form>

答案 3 :(得分:0)

onClick="setFocus(search);

删除大括号内的“搜索”

为文本字段设置id="search"

答案 4 :(得分:0)

Working Demo

你没有调用函数setFocus()。此外,没有为文本框分配ID。

HTML:

<input name="q" id="search_box" type="text" size="40" placeholder="Search for a DLL" />

使用Javascript:

document.getElementById("search_box").focus();