1.http://topic.csdn.net/u/20091213/14/7832918e-7020-4bce-bea5-728148e03631.html
2.而具体应该是怎样实现的呢?假设我们的表单如下:
<form id="signin" method="post" name="signin" action="http://www.happinesz.cn">
<input value="hidefor" type="hidden" name="hide" />
<input id="usr" name="usr" />
<input id="pwd" type="password" name="pwd" />
<input id="smbt" value="submit" type="button" name="smbt" />
</form>
我们要让焦点落在id="usr"的input上,用 javascript 的方法,我们可以这样做:
document.forms["signin"].elements["usr"].focus();
这里是当我们明确知道要在那个表单上添加 focus 的时候可以用的方法。这里,elements也可以用方括号的方法来获取input表单,比如.elements[0]即为第一个input表单。当我们要聚焦的 input前面有type="hidden"的隐藏input,由于隐藏的input是不支持.focus的,一旦应用其上,就会出现javascript错误,要避免这样的的错误。我们可以搜索第一个表单中,第一个非隐藏的 input,并给加上.focus:(除非你是想封装起来,自动判断,不然,最好不要用这个方法,多浪费资源啊,又if又for的)
window.onload = function(){
if(document.forms.length>0){
for(i=0;i<document.forms[0].elements.length; i++){
var oInput = document.forms[0].elements[i];
if(oInput.type!="hidden"){
oInput.focus();
return;
}
}
}
}
到这里,很多网站都只做到这里,比如我前面提到的Wordpress的登陆界面和支付宝的登陆界面。他们的目标的相同的,提升用户体验。我的目标也这样。但是,这有时候,这并不一定提升了用户体验。为什么呢?
想想,你是不是也曾出现过这样的状况:当时,你的网速并不快,你进入www.alipay.com的时候,还没有自动聚集,因为JS还没加载。但,你已经输入用户名了,并且已经在输入密码。好,打住。我们来讲个故事:很久很久以前,有个叫sofish,他当时挂着迅雷在下载XXX东西,急着想要用支付宝,当时页面还没有加载完,输入用户名后,正准备输入密码(习惯性地用键盘上的TAB键来切换到密码框),然后,抬头,当时,密码出现在输入用户名的框上,并且,旁边有一同学正在那里看着。
你看,你看,难道,这样的自动聚焦提升了用户的所谓的体验么? 这里,就往往相反,可能导致用户要重新改密码(比如那个当时RP比较低下的叫sofish的家伙)。
有什么方法可以解决么?当然!我们把上面的代码改装如下:
window.onload = function(){
if(document.forms.length>0){
for(i=0;i<document.forms[0].elements.length; i++){
var oInput = document.forms[0].elements[i];
if(oInput.type!="hidden" && oInput.value==0){
oInput.focus();
return;
}
}
}
}
但是,这样一来,这个聚集就会自动跳到下一个非隐藏的input中,如果我正在输入,那不是很不爽? 嗯,当然不爽,所以,我们再折腾一下,做点小改正:
window.onload = function(){
if(document.forms.length>0){
for(i=0;i<document.forms[0].elements.length; i++){
var oInput = document.forms[0].elements[i];
if(oInput.type!="hidden" && oInput.value.length>0){
oInput.blur();
return;
}else if(oInput.type!="hidden"){
oInput.focus();return
}
}
}
}
由于在oInput.type!="hidden"中有一种情况,即当用户已经输入的时候,他会自动聚集到下一个,这样,也有问题,所以,我们让如果已经有输入的情况下,去掉所有input的焦点,而 else if中才让没有输入的用户自动对焦到第一个。(当然,如果有人习惯先输入密码,再输入用户名,那就再另想办法吧)。
其实,这样,有时候好用,但有时候相当于根本不去自动聚焦。不过,对于保护用户的输入(特别是密码)来说,我想,用改进的方法,会比无改进的自动聚焦和根本不自动聚集来得好。当然,我相信,会有更好的方法。请不吝赐教。其他的就让我这个爱折腾的JS编程学院新生慢慢发现吧。
分享到:
相关推荐
js页面聚焦滚动 在线使用连接百度翻译 含js css 页面更改为html便于查看效果
Vue指令,你可以很方便地对页面中所有input和textarea的自动聚焦行为进行流程控制
重要的话说三遍:拷贝代码加相机权限、拷贝代码加相机权限、...功能描述:相机取景框、自动聚焦、闪光灯、前后照相机切换 这里是必须权限: <uses-feature android:name="android.hardware.camera.autofocus"/>
使用:当用户在任意页面聚焦到任意密码输入框时,下面会弹出花密的输入窗口,输入记忆密码和区分代号之后,生成的密码会自动填充到该密码输入框中。在页面的任意位置按Alt+S可聚焦到记忆密码输入框;在页面任意地方...
当用户在任意页面聚焦到任意密码输入框时,下面会弹出花密的输入窗口,输入记忆密码和区分代号之后,生成的密码会自动填充到该密码输入框中。 在页面的任意位置按Alt+S可聚焦到记忆密码输入框;在页面任意地方按Alt+...
针对单一价值评价的聚焦爬虫搜索策略存在主题漂移等问题进行了研究, 充分...实验仿真结果表明, 相对于单一价值的搜索策略, 量子进化算法获得较高的页面查全率和信息查准率, 能较好地解决现存问题, 具有一定的自适应性。
例如我最近做的一个项目,有个装箱出库的流程,input框自动聚焦的流程如下:页面进入时自动聚焦到订单号输入框->订单号扫描完毕聚焦到商品条码输入框->扫描完一个商品条码后依然停留在条码输入框->所有条码扫描完毕...
突出显示页面上的可聚焦元素,并显示它们在 Tab 键时聚焦的顺序。 这通过查找可聚焦元素来工作,无论它是带有 tabindex、a、img 的元素,还是满足此谓词的其他元素: function focusable ( element ) { var map ...
该方法利用当前页面的信息计算链接的立即回报能量,利用到达同一链接不同历史路径给予的历史回报知识不断迭代更新链接的预期剩余能量。利用预期剩余能量作为链接的优先级和搜索深度限制,设计了基于预期剩余能量模型...
光标聚焦到每一输入框或者点击按钮后彩色线条都会「流动」到对应的地方,有很强的指示效果。动感线条使用 svg 实现。
支持单选多选的答题样式,写好的js,点题目自动聚焦,带有计时器
web版 在线考试模版静态页面。 支持单选多选的答题样式,写好的js,点题目自动聚焦,带有计时器 HTML JS 单选 多选 计时器
圆.js 用样式聚焦感兴趣的页面元素。
插件简介:一个用于让站长推管活动的插件,类似化龙巷的活动聚焦页面http://act.hualongxiang.com/ 安装说明(如何安装):将文件夹actives放到hack目录下,后台安装插件,即可使用。 前台效果: 后台设置: ...
http://blog.csdn.net/ren65432/article/details/53815832
2)集成Jsoup解析器,用于HTML页面解析 3)使用Redis对URL快速去重 4)使用slf4j作为日志门面 ###项目功能: 1)支持个性化性质 2)支持定时任务增量爬取数据 3)支持使用cookie模拟登录 4)支持设置代理列表并随机...
自定义拍照页面,闪光 聚焦 自定义frame。
举个聚焦输入框的例子,如下: 一个输入框: 当页面加载时,该元素将获得焦点 (注意: autofocus 在移动版 Safari 上不工作)。事实上,只要你在打开这个页面后还没点击过任何内容,这个输入框就应
有的时候黄色边框很影响页面效果,并且textarea拖动改变大小之后直接影响布局,所以为了不使这些多余的功能和效果影响页面,可以使用一下几句CSS清除掉chrome浏览器的默认效果,代码如下: 取消表单项聚焦时产生的...