javascript实现页面加载时设置input按钮焦点-自学php网

javascript实现页面加载时设置input按钮焦点

来源：自学PHP网时间：2014-09-19 14:47 作者：阅读:次

[导读] 本文章来给大家分享一篇关于javascript实现页面加载时设置input按钮焦点，希望此文章对各位同学会有所帮助哦。...

在电子商务的充值、支付等动作时；用户确认订单后，执行提交动作，我们把这个页面称为“订单提交页面”，订单打开一个新的页面跳转至支付平台进行订单的处理，这个页面即为“支付平台处理页面”，而订单提交页面则显示一个遮罩层，提示用户在新页面完成订单且有“已完成支付”与“支付出现问题”两个按钮。

原型图片xx

而现在我就是要实现这样的一个业务流程。待整个业务流程完成后，使用firefox进行测试充值等，一切良好（当然架构，还有开发都没那么快与容易，详细可以再写一篇了）。完成后内部测试，使用各种浏览器，firefox，chrome，ie，360等浏览器进行操作。同事Y提醒在使用ie进行购买时，业务上也没有特别大的问题，但就是在进行确认订单提交动作后，form新页面打开，浏览器焦点在“支付平台处理页面”上面，不过这时“支付平台处理页面”突然最小化失去浏览器焦点；浏览器焦点又再次回到“订单提交页面”的弹出层上面。

很显然功能确实不受影响能正常使用，但是对于用户的体验不好，用户在完成订单提交后，浏览器焦点应该直接在“支付平台处理页面”上，用户可以直接进行支付平台处理操作。而现在用户则必须再次点击“支付平台处理页面”重新获取浏览器的焦点。

只能再次检查代码，这一流程使用的是很简单很原始的逻辑。下面的代码可以直接在IE8及其以下的浏览器（浏览器新打开页面必须是在新窗口的形式，如果是以新标签打开页面则没有这样的问题）中打开点击submit按钮即可出现这样的问题。

代码如下

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input test</title>

.loginform { width: 400px; height: 200px; border: 1px solid #ccc; margin: 0 auto;}
.message { width: 400px; height: 160px; border: 2px solid #ccc;  display: none; background:#fff;}
.message .i{ width: 80px; height: 20px; margin:10px; display:block; border: 1px solid #ccc;}
h4 { text-align: center; }
</style>
</head>

<body>

<div>
<form action="http://baidu.com" target="_blank" id="goform">
<h4>username:<input type="text" name="name" /></h4>
<h4>password:<input type="text" name="pwd" /></h4>
<h4><input type="button" id="go" name="go" value="submit" /></h4>
</form>

</div>

$(document).ready(function() {

$('#go').click(function(){

$.blockUI({
message: $("#message"),
timeout: false,
onUnblock: false,
css: {
top: '20%',
left: ($(window).width()-400)/2,
cursor: 'pointer',
margin: '0 auto',
background: 'none',
border: 'none'}
});
$('.blockUI').attr('title','点击关闭').click( $.unblockUI );
$('#goform').submit();
});
});
</script>

</body>
</html>

订单form提交的动作主要就是由

代码如下

复制代码

$(‘#go’).click(function(){
// 遮罩处理

// 表单提交
$(‘#goform’).submit();
});

这样的代码完成的，以js至上而下的执行流程。首先完成遮罩的处理，然后进行form订单的提交动作。左思右想应该是没什么问题的啊，但是还是如此。

于是开始考虑延时执行form表单提交的动作，意思就是让遮罩处理的动作完成后，在过几秒进行执行。

代码如下	复制代码
setTimeout(function(){$(‘#goform’).submit(); }, 10);

再次执行，弹出层正常执行，但因为IE提示安全警告拦截了新页面的弹出。因为IE不认为表单的提交是用户的手动操作，如要顺利弹出需要用户将该站加入允许弹出新页面的列表，这样更加不可取。

进而开始考虑实现浏览器的sleep，即休眠暂停当前线程；确实真的找到了有人实现sleep的东西，这里查看。不过sleep的核心实现都是循环执行其他代码或者是指定一个时间如果时间到了，则跳出

代码如下	复制代码
<script type="text/javascript"> function sleep(milliSeconds){ var startTime = new Date().getTime(); // get the current time while(new Date().getTime() < startTime + milliSeconds); // hog cpu } </script>

不过上面的代码其实并没有让脚本解释器sleep下来，而且有让CPU迅速上到高负荷的附作用。浏览器甚至会在该段时间内处于假死状态。不可取。

在迷惑了半天还是不知道为什么，于是只好请教大牛同事w了。问题简要的说明后，w看过代码后表示按顺序执行是完全没问题的，也进入了我之前的思维，使用setTimeout，更改动作逻辑。同样行不通，最后w注意到弹出层的内容，看到里面有两个input标签；于是就是直接把它改为a标签。再次尝试果然就好了，w说input会自动获取焦点的，而a标签则不会。

在把input替换为a标签后，没有出现这样的情况了。这是为什么呢。在对网页用table选择不同标签时，页面标签都能正常获取到焦点。浏览器加载网页时a与input的焦点获取原理是怎样的？

js获取字符串长度(支持中文)

spring3.2 mvc ajax返回和中文乱码解决办法

子栏目

javascript实现页面加载时设置input按钮焦点

最新评论

添加评论

更多文章推荐

添加评论