Автоматическая фокусировка на поле в HTML - PullRequest
Новая
       17

Автоматическая фокусировка на поле в HTML

0 голосов
/ 28 января 2011

У меня есть стартовая страница с 4 поисковыми системами, которые можно выбрать.Как сделать так, чтобы каждое поле выбиралось при выборе поисковой системы?

Вот один из движков: 

<div id="searchrotate" class="body">
    <div class="tab_container">
    <div id="Bing" class="tab_content"><!-- Bing -->
        <div class="searchform">
        <form method="get" action="http://www.bing.com/search" name="bing-search">
            <div class="favicon"><img src="images/favicon-bing.jpg"></div>
            <input type="text" name="q" class="searchfield" value="">
            <input type="image" src="images/search-btn.jpg" class="searchbtn" alt="Submit">
        </form>
        </div>
    </div>

... и css для "вращения" между4 варианта: 

#searchhold { width:360px; height:62px; }
#searchselect { width:360px; height:26px; }
#searchselect ul { margin:0; padding:0; float: left; list-style:none; }
#searchselect ul li { float:left; overflow: hidden; position: relative; }
#searchselect ul li.current { color:#000; font-weight:bold; background:#ccc; background: -moz-linear-gradient(top, #FFFFFF 0%, #CFCFCF 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#CFCFCF)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#CFCFCF',GradientType=0 ); /* ie */ }
#searchselect ul li.current a { color:#000; }
#searchselect ul li a { display:block; width:68px; height:14px; padding:6px; text-align:center; color:#fff; text-decoration:none; }
#searchrotate { width:360px; height:36px; background: #cfcfcf; background: -moz-linear-gradient(top, #FFFFFF 0%, #E4E4E4 50%, #CFCFCF 51%, #D9D9D9 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(50%,#E4E4E4), color-stop(51%,#CFCFCF), color-stop(100%,#D9D9D9)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#D9D9D9',GradientType=0 ); /* ie */ }
#searchrotate div.searchform { width:350px; height:26px; padding:5px; }
#searchrotate div.searchform div.favicon { float:left; display:block; width:27px; height:27px; }
#searchrotate input.searchfield { float:left; display:block; width:266px; height:15px; padding:5px; border:1px solid #b0b0b0; background:#535353; color:#fff; font-size:11px; }
#searchrotate input.searchbtn { float:right; display:block; width:44px; height:27px; border:none; background:#a8a8a8; }

1 Ответ

1 голос
/ 28 января 2011

Сделайте это так: 

<div id="clickme" onclick="document.getElementById('bing').focus()">This can be any element</div>
<input type="text" id="bing"/>

Если вы нажмете "clickme" div, поле ввода bing будет выбрано.Это можно сделать практически с любым типом элементов (input, div, span и т. Д.), И они могут находиться в любом месте документа.

...