防止 web 应用程序中页面之间的击键丢失
[英]Preventing the loss of keystrokes between pages in a web application
问题描述
My current project is to write a web application that is an equivalent of an existing desktop application.
我当前的项目是编写一个与现有桌面应用程序等效的 web 应用程序。
In the desktop app at certain points in the workflow the user might click on a button and then be shown a form to fill in. Even if it takes a little time for the app to display the form, expert users know what the form will be and will start typing, knowing that the app will "catch up with them".在桌面应用程序的工作流程中的某些点，用户可能会单击一个按钮，然后显示一个要填写的表单。即使应用程序显示表单需要一点时间，专家用户也知道该表单将是什么并且会开始打字，知道应用程序会“赶上他们”。
In a web application this doesn't happen: when the user clicks a link their keystrokes are then lost until the form on the following page is dispayed.在 web 应用程序中不会发生这种情况：当用户单击链接时，他们的击键将丢失，直到显示下一页上的表单。 Does anyone have any tricks for preventing this?有没有人有任何技巧来防止这种情况？ Do I have to move away from using separate pages and use AJAX to embed the form in the page using something like GWT , or will that still have the problem of lost keystrokes?我是否必须放弃使用单独的页面并使用 AJAX 使用GWT之类的东西将表单嵌入页面中，还是仍然存在丢失击键的问题？
4 个解决方案
解决方案1
6 2008-09-14 22:43:40
Keystrokes won't have an effect until the page has loaded, javascript has been processed and the text field is then focused.直到页面加载完毕，javascript 已经被处理并且文本字段被聚焦后，击键才会生效。
Basically what you are really asking is;基本上你真正要问的是； how do I speed up a web application to increase response times?如何加快 web 应用程序以增加响应时间？ Your anwser is AJAX!您的答案是 AJAX！
Carefully think about the most common actions in the application and use AJAX to minimise the reloading of webpages.仔细考虑应用程序中最常见的操作，并使用 AJAX 最大限度地减少网页的重新加载。 Remember, don't over-use AJAX.请记住，不要过度使用 AJAX。 Using too much javascript can hinder usability just as much as it can improve it.使用过多的 javascript 会阻碍可用性，就像它可以提高可用性一样。
Related reading material:相关阅读材料：
- Response Times: The Three Important Limits - Great article from the usability king, Jacon Neilson.响应时间：三个重要限制- 来自可用性之王 Jacon Neilson 的精彩文章。
- Ajax Usability Mistakes Ajax 可用性错误
- AJAX Usability Checklist AJAX 可用性检查表
解决方案2
1
Perhaps I am under-thinking the problem but I'll throw this out there... You could just put your form inside a hidden div or similar container that you show (perhaps give it a modal look/behavior?) on the click event of the link.也许我正在考虑这个问题，但我会把它扔在那里......你可以把你的表单放在一个隐藏的 div 或你显示的类似容器中（也许给它一个模态外观/行为？）点击事件的链接。 That way the form is already loaded as part of the page.这样，表单就已经作为页面的一部分加载了。 It should appear almost instantly.它应该几乎立即出现。
You can find modal div tutorials all over the place, shouldn't be too tricky.您可以在各处找到模态 div 教程，应该不会太棘手。 If you're using ASP.NET there's even one included in Microsoft's AJAX library.如果您使用的是 ASP.NET，微软的 AJAX 库中甚至包含一个。
解决方案3
0 2008-09-14 22:36:50
AJAX or plugin are your only chances. AJAX 或插件是您唯一的机会。
解决方案4
0 2008-09-14 22:54:13
I think it will be quite hard to do what you want.我认为做你想做的事情会很困难。 I presume that the real problem is that the new page takes too long to load.我认为真正的问题是新页面加载时间过长。 You should look at caching the page or doing partial caching on the static components such as pictures etc. to improve the load time or preloading the page and making it invisible.您应该查看缓存页面或对 static 组件（例如图片等）进行部分缓存，以改善加载时间或预加载页面并使其不可见。 (see Simple Tricks for More Usable Forms for some ideas) （有关一些想法，请参阅更多可用的简单技巧 Forms ）
For coding options you could use javascript to capture the keystrokes (see Detecting various Keystroke )对于编码选项，您可以使用 javascript 来捕获击键（请参阅检测各种击键）
<html><head>
<script language=javascript>
IE=document.all;
NN=document.layers;
kys="";
if (NN){document.captureEvents(Event.KEYPRESS)}
document.onkeypress=katch
function katch(e){
if (NN){kys+=e.which}
if (IE){kys+=event.keyCode}
document.forms[0].elements[0].value=kys
}
</script>
</head>
<body>
<form><input></form>
</body>
</html>
You will need to save and then transfer them to the new page after control passes from the current page.您需要保存它们，然后在控制从当前页面传递后将它们转移到新页面。 (see Save Changes on Close of Browser or when exiting the page ) （请参阅在关闭浏览器或退出页面时保存更改）
For some general info on problems with detecting keystrokes in the various browsers have a look at Javascript - Detecting keystrokes .有关在各种浏览器中检测击键问题的一些一般信息，请查看Javascript - 检测击键。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.