- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我现在一直在为以下问题而烦恼,希望你们能指出我的(可能是显而易见的)解决方案。
我有一个简单的 Web 应用程序,它接受输入字段 (type="text")。当页面加载时,光标已准备好接受输入。一旦用户导航离开 (onBlur),AJAX 部分就会启动,我会在数据库中查找代码,并根据结果使右侧的框变为绿色或保持红色。
更改后,我希望清除输入字段并准备好接收新输入。清除字段确实有效,但是将焦点设置到它却没有。我试过 focus() 和 select(),不行……我试着折叠 setTimeout,不行。使用当前代码,它在 FF、chrome 和 IE 中不起作用。希望大家多多指教。
这是网页代码:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function checkTicket(tno) {
var xmlhttp;
if (tno=='') {
document.getElementById('inside').innerHTML='0';
document.getElementById('validbox').style.backgroundColor='#FF0000';
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById('inside').innerHTML=xmlhttp.responseText;
if (document.getElementById('inside').innerHTML=='1') {
document.getElementById('validbox').style.backgroundColor='#00FF00';
} else {
document.getElementById('validbox').style.backgroundColor='#FF0000';
}
set_focus();
}
}
xmlhttp.open("GET","check_eticket.php?t="+tno,true);
xmlhttp.send();
}
function set_focus() {
document.form.ticketnumber.value='';
document.form.ticketnumber.focus();
}
</script>
</head>
<body onLoad="set_focus()">
<div id="wrapper" style="position: absolute; top: 50%; height: 400px; margin-top: -200px; width: 99%;">
<div id="innerwrap" style="width: 75%; margin-left: auto; margin-right: auto;">
<div style="float: left; width: 50%; margin-left: auto; height: 400px; padding-top: 115px;">
<span style="font-size: 3em; font-weight: bold; text-align: center;">TOEGANGSCODE:<br /></span>
<form name="form">
<input name="ticketnumber" id="ticketnumber" type="text" onBlur="checkTicket(this.value)" size="11" style="font-size: 3.55em; font-weight: bold;" />
</form>
</div>
<div id="validbox" style="float: right; width: 50%; background-color: #FF0000; height: 400px; margin-right: auto;">
<div id="inside" style="display: none;">0</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
问题实际上很简单:页面的“视口(viewport)”失去焦点。
网页上的所有“事件”元素(表单字段、 anchor )都会收到一个“tabindex”。当您填写字段并按“Tab”时,焦点将移至下一个“事件”元素。
在您的页面上,没有“下一个”元素。然后,浏览器会将焦点设置到浏览器界面中的下一个元素:在我的例子中 (Firefox 14.01),这个下一个元素是浏览器顶部的选项卡。
此选项卡不是您网页的一部分。因此,我的浏览器会阻止页面“窃取”焦点。
答案实际上很简单:只需添加一个额外的事件元素即可。对于 html4.01,以下标签可以获得焦点:A、AREA、BUTTON、INPUT、OBJECT、SELECT 和 TEXTAREA(参见 Tab Index on div)。 html5 规范告诉我,您可以使用制表位将任何 html 元素添加到此列表中,但遗憾的是,这(还?)对我不起作用。
现在,我建议您向页面添加 anchor ,如下面的解决方案所示。
<html>
<head>
<script type="text/javascript">
function checkTicket(tno) {
var xmlhttp;
if (tno=='') {
document.getElementById('inside').innerHTML='0';
document.getElementById('validbox').style.backgroundColor='#FF0000';
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById('inside').innerHTML=xmlhttp.responseText;
if (document.getElementById('inside').innerHTML=='1') {
document.getElementById('validbox').style.backgroundColor='#00FF00';
} else {
document.getElementById('validbox').style.backgroundColor='#FF0000';
}
set_focus();
}
}
xmlhttp.open("GET","check_eticket.php?t="+tno,true);
xmlhttp.send();
}
function set_focus() {
document.form.ticketnumber.value='';
document.form.ticketnumber.focus();
}
</script>
</head>
<body onLoad="set_focus()">
<div id="wrapper" style="position: absolute; top: 50%; height: 400px; margin-top: -200px; width: 99%;">
<div id="innerwrap" style="width: 75%; margin-left: auto; margin-right: auto;">
<div style="float: left; width: 50%; margin-left: auto; height: 400px; padding-top: 115px;">
<span style="font-size: 3em; font-weight: bold; text-align: center;">TOEGANGSCODE:<br /></span>
<form name="form">
<input name="ticketnumber" id="ticketnumber" type="text" onBlur="checkTicket(this.value)" size="11" style="font-size: 3.55em; font-weight: bold;" />
</form>
</div>
<div id="validbox" style="float: right; width: 50%; background-color: #FF0000; height: 400px; margin-right: auto;">
<div id="inside" style="display: none;">0</div>
</div>
<a href="">bang!</a>
</div>
</div>
</body>
</html>
关于javascript - 使用 AJAX 刷新另一个 div 后将焦点设置在文本字段上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12075867/
我们知道,当使用 hibernate 对数据库进行批量更新时(即使在 HQL 中),所做的更改不会复制到存储在当前 session 中的实体。 所以我可以调用 session.refresh 来加载对
我正在做一个项目,所有的东西都保存在事件中,所以服务器需要一些时间来响应新数据。我正在使用 Fluent 等待使用 ajax 的页面,但是这个不使用任何 ajax。所以我想刷新页面检查是否有新项目,如
我有一个从 Vector 创建的 JTable。 如何刷新 JTable 以显示添加到 Vector 的新数据? 最佳答案 当 TableModel 发生更改时,您的 JTable 应该会自动更新。我
有没有办法使用下面的代码来刷新已经存在的 div id,而不是刷新时间? window.onload = startInterval; function startInterval() {
我更新了在 Shiny Server 上运行的 Shiny 应用程序使用的 DataSet.RData。但是, Shiny 的应用程序仍在旧数据上运行。我已通过浏览器历史记录清除并重新启动浏览器几次,
我的应用程序中有一个无限滚动的网格面板(ExtJs 4.2.1),类似于 this example .用户可以单击刷新按钮,然后必须使用数据库中的数据更新网格的行。我在刷新按钮处理程序中调用 stor
我不知道这三种方法中哪一种最适合我。他们都为我工作。有谁知道刷新、更新和重画之间的区别吗? 最佳答案 根据在线文档: Refresh - 重新绘制屏幕上的控件。 Call Refresh method
有什么办法吗 ICollectionView.Refresh() 或者 CollectionViewSource.GetDefaultView(args.NewValue).Refresh(); 在
这个问题已经有答案了: Updating address bar with new URL without hash or reloading the page [duplicate] (4 个回答)
我有一个 javascript 设置超时以在 10 秒后关闭 div,并且我想在 div 关闭时添加页面刷新。我正在使用的代码如下。 var container_close_sec = "1
我有一组具有以下名称的页面.... update1.php update2.php update3.php update4.php update5.php update6.php update7.ph
如果是则触发js函数。我可以使一个复选框保持选中状态,并在页面刷新时检查值并选中“checked”,并提交以下内容... checked="checked" /> 你都不记得触发js函数。 这是我的
我正在尝试刷新 php 脚本以在数据库更新时显示更新的内容。我首先构建了我的 php,然后刷新代码,然后合并它们。但是,脚本不会更新。有谁知道为什么吗? $(document).ready
当我要删除的节点扩展集合类型时,Grails中有一个错误阻止我使用removeFrom *。直接从关联中删除节点不会更新二级缓存。 A hasMany B 有什么方法可以使关联缓存手动无效或强制重新加
我正在使用 hibernate 和 mysql 来抽象一个数据库,以便在 java 驱动的网站中使用。我使用 hibernate 很好地解决了所有查询,但似乎无法弄清楚如何使用它进行更新、插入和删除,
如何通过调用 oncreateview 方法重新创建 fragment ?我有一个 fragment ,用于通过表单插入新数据,单击按钮后,我想通过删除在 EditText 中输入的数据来重新创建 f
当我从一个到另一个时,我试图刷新我的观点。我知道我应该将刷新代码放在 viewWillAppear 中,但我不知道该放什么代码。 你们能帮帮我吗? 谢谢! 最佳答案 在您看来,请调用 setNeeds
我正在开发 iPhone 应用程序并希望使用: CFStreamCreatePairWithSocketToHost(NULL, url, port, &serverReadStream, &serv
看到我已经创建了一个用于登录用户的脚本。而且我还添加了设置选项卡,以便用户可以编辑他们的设置!但是当我尝试它时,mysql 表中的数据发生了变化,但配置文件中显示的用户名和用户电子邮件保持不变!当我注
好的。这就是它的样子。 当我启动应用程序时,我从服务器收到的第一件事是数据: {name: "test", type: "checkbox" checked: true, } 这使得其中一个复选框
我是一名优秀的程序员,十分优秀!