帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:for  Javascript  Usability  JAVA  form  

介绍

表单是网站上最重要的过程。 它们用于提交搜索。购买产品。服务,并提供关于网站的反馈。 那么为什么它们通常是枯燥的。不可用的和uninspiring的?

本文演示如何使用unobtrusive的JavaScript来提高反馈表单的可用性。

因此,你可以看到我们的目标,查看这个的完整功能示例。

JavaScript

注册事件

第一个任务是创建在页面加载时发生的事件。 使用函数调用来执行函数调用 <body onload="callfunction()"> 在HTML页面中,我们将使用 Willison的 Simon addLoadEvent(func) 这将允许我们在页面加载后添加函数调用。

我们将使用以下 JavaScript:

function addLoadEvent(func)
{
 var oldonload = window.onload;
 if (typeof window.onload!= 'function')
 {
 window.onload = func;
 } else {
 window.onload = function()
 {
 oldonload();
 func();
 }
}
addLoadEvent(presentForm);

收集表单元素

在你的JavaScript文件中创建一个名为 presentForm的空函数:

function presentForm()
{
}

第二个任务是创建将由JavaScript操作的表单元素的集合。 <form> 嵌套在带有 id="form"<div> 中。 我们可以使用 getElementById 命令检索 <div id="form"> 并将它分配给变量 eleDiv。 接下来,我们使用 getElementsByTagName 命令将 <div> 中的所有窗体分配给变量 eleForms,如下所示:

function presentForm()
{
 var eleDiv;
 var eleForms;
 if (document.getElementById && document.getElementsByTagName)
 {
 eleDiv = document.getElementById("form");
 eleForms = eleDiv.getElementsByTagName("form");
 }
}

收集textareas和输入

现在,<div id="form"> 中包含的所有表单都被分配给变量 eleForms 作为一个HTML对象 Collection。 下一步是创建所有 <input><textarea> 在这个 <form> 中的集合。 我们可以通过遍历 <div id="form"> 中包含的所有 <form> 并创建更多的HTML对象集合来实现这一点。 我们可以使用 getElementsByTagName 命令将 <input> 到变量 eleInputs<textarea>的变量分配给变量 eleTextAreas

function presentForm()
{
 var eleDiv;
 var eleForms;
 if (document.getElementById && document.getElementsByTagName)
 {
 eleDiv = document.getElementById("form");
 eleForms = eleDiv.getElementsByTagName("form");
 for (var intCounter = 0; intCounter <eleForms.length; intCounter++)
 {
 eleInputs = eleForms[intCounter].getElementsByTagName("input");
 eleTextAreas = eleForms[intCounter].getElementsByTagName("textarea");
 }
 }
}

presentForm() 函数几乎完全完成。 我们的下一个任务是使用 <textarea><input> 集合做一些事情。 通过将集合传递给一个新函数,我们将这样做,该函数将 onfocus() 事件应用于每个项,如下所示:

function presentForm()
{
 var eleDiv
 var eleForms
 if (document.getElementById && document.getElementsByTagName)
 {
 eleDiv = document.getElementById("form");
 eleForms = eleDiv.getElementsByTagName("form");
 for (var intCounter = 0; intCounter <eleForms.length; intCounter++)
 {
 eleInputs = eleForms[intCounter].getElementsByTagName("input");
 eleTextAreas = eleForms[intCounter].getElementsByTagName("textarea");
 applyFunctionToFormElements(eleInputs);
 applyFunctionToFormElements(eleTextAreas);
 }
 }
}

应用 onfocus() 事件

接下来我们创建一个名为 applyFunctionToFormElements(htmlObjectCollection) 然后循环访问对象 Collection,以便应用 onfocus() 事件:

function applyFunctionToFormElements(htmlObjectCollection)
{
 for (var intCounter = 0; intCounter <htmlObjectCollection.length; intCounter++)
 {
 }
}

onfocus() 事件应用到事件之前,我们需要确保它没有应用到提交按钮。 示例中提供的提交按钮具有分配给它的class="button",可以用于标识它。 接下来,我们将 onfocus() 事件应用到剩余的<input><textarea>

function applyFunctionToFormElements(htmlObjectCollection)
{
 for (var intCounter = 0; intCounter <htmlObjectCollection.length; intCounter++)
 {
 if(htmlObjectCollection[intCounter].className!= "button")
 {
 htmlObjectCollection[intCounter].onfocus = function ()
 {
 }
 }
 }
}

一切都发生了 !

finally 我们已经到达了激动人心的部分 ! 让我们使用 onfocus() 事件来更改页面的外观。 我们可以设置表单元素的类别,它们的兄弟姐妹,家长,甚至祖父母。 在本例中,我们将 <input><label> 改为粗体,并将包含 <fieldset>的background 颜色改为。 我们将在 onfocus() 函数中输入以下代码:

this.parentNode.parentNode.parentNode.className = "fieldsetHighlight";this.previousSibling.className = "labelHighlight";

完成的函数应如下所示:

function applyFunctionToFormElements(htmlObjectCollection)
{
 for (var intCounter = 0; intCounter <htmlObjectCollection.length; intCounter++)
 {
 if(htmlObjectCollection[intCounter].className!= "button")
 {
 htmlObjectCollection[intCounter].onfocus = function ()
 {
 this.parentNode.parentNode.parentNode.className = "fieldsetHighlight";
 this.previousSibling.className = "labelHighlight";
 }
 }
 }
}

我们使用 className="fieldsetHighlight" 为字段集 <fieldset> 指定了一个粉红背景,并使用 className="labelHighlight" 向标签 <label> 添加了一个大胆的状态。 这两个都是包含在CSS中的预定义类:

.fieldsetHighlight{border: 1px solid #d7b9c9;background: #f3e6ed;}
.labelHighlight{font-weight: bold;}

清除元素

如果单击 <input> s 或者 <textarea> s 中的一个,则字段集的background 颜色将变为粉红色和标签。

但是,当你在不同的<fieldset> 中单击第二个 <input> 或者 <textarea> 时? 你单击的第一个 <input> 或者 <textarea> 仍然被抓取粉红色,但你单击的第二个项目也高亮显示。 final 任务是循环通过 <label><fieldset>,并将它们的颜色和字体重回到正常的className=""

因此,我们将在名为 clearFieldsetsAndLabels()onfocus() 函数的开头插入一个新函数调用,如下所示:

function applyFunctionToFormElements(htmlObjectCollection)
{
 for (var intCounter = 0; intCounter <htmlObjectCollection.length; intCounter++)
 {
 if(htmlObjectCollection[intCounter].className!= "button")
 {
 htmlObjectCollection[intCounter].onfocus = function ()
 {
 clearFieldsetsAndLabels();
 this.parentNode.parentNode.parentNode.className = "fieldsetHighlight";
 this.previousSibling.className = "labelHighlight";
 }
 }
 }
}

我们将创建 clearFieldsetsAndLabels() 函数并获取包含在 <div id="form"> 中的所有 <label><fieldset>:

clearFieldsetsAndLabels()
{
 var eleDiv;
 var eleFieldsets;
 var eleLabels;
 eleDiv = document.getElementById("form");
 eleFieldsets = eleDiv.getElementsByTagName("fieldset");
 eleLabels = eleDiv.getElementsByTagName("label");
}

然后我们需要将每个 <fieldset><label> HTML对象集合传递给一个函数来重置它们的类。

clearFieldsetsAndLabels()
{
 var eleDiv;
 var eleFieldsets;
 var eleLabels;
 eleDiv = document.getElementById("form");
 eleFieldsets = eleDiv.getElementsByTagName("fieldset");
 eleLabels = eleDiv.getElementsByTagName("label");
 clearEle(eleFieldsets)
 clearEle(eleLabels);
}

final 函数循环遍历HTML对象 Collection 中的每个元素并重置它们的类。

function clearEle(elements)
{
 for (var intCounter = 0; intCounter <elements.length; intCounter++)
 {
 elements[intCounter].className = "";
 }
}

结束语

就是这样一个简单的JavaScript解决方案,使用unobtrusive的JavaScript增强了反馈表单的可用性。 查看这个的完全功能示例。



文章标签:JAVA  Javascript  for  form  Usability  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语