js中怎么设置默认的焦点,类似于百度首页的输入框

JavaScript07

js中怎么设置默认的焦点,类似于百度首页的输入框,第1张

<html>

<head>

<title>页面的标题</title>

</head>

<body>

~~~~

<input type="text" id='sss' >

其它内容

~~~

<script type="text/javascript">

document.getElementById("sss").focus()

</script>

</body>

</html>

让文本框活的焦点只需要完成两个步骤。第一,定位到这个标签。第二,让标签触发活的焦点事件。tabindex作为定位标签未知不可靠,如果未知有变动就会出错。最好的办法就是用id选择器,速度快,定位准确。然后利用js或者jquery中focus()方法即可让光标定位到文本框中。

应用扩展:普遍应用的案例就是在网站的登陆页中,为了更方便用户输入,进入页面后就定位到用户名密码的文本框,不用再动鼠标进行点击。增强了用户体验。

希望能够帮助到您。

<body onload="javascript:showLoginMeg('usrId','${loginForm.loginMsg}')">  //在body中定义事件  

function showLoginMeg(logobj,loginMsg){

        if ("" != loginMsg){

         //logobj.focus()   

         alert(loginMsg)

         document.getElementById(logobj).focus()  //此处的logobj是一个字符串 得把他转换成对象进行焦点的定位

        }

    }

<pre></pre>

<pre></pre>

<div class="translator-theme-default" id="translator-floating-panel" style="bottom:auto left:0px right:auto top:89px">

<div title="点击翻译" id="translator-floating-panel-button"></div>

</div>

<pre></pre>

<div class="translator-theme-default" id="translator-floating-panel" style="bottom:auto left:545px right:auto top:20px">

<div title="点击翻译" id="translator-floating-panel-button"></div>

</div>

    

        <div style="padding-top:20px">         

            <p style="font-size:12px">版权声明:本文为博主原创文章,未经博主允许不得转载。</p>

        </div>