使用 Adobe Dreamweaver 中的内置 JavaScript 行为

优质
小牛编辑
248浏览
2023-12-01
使用本主题了解如何应用 Adobe Dreamweaver 中的内置 JavaScript 行为。

使用内置行为

Dreamweaver 附带的行为已被编写为可在新型浏览器中工作。这些行为在较旧的浏览器中将失败,并且不会产生任何后果。

注意:Dreamweaver 操作已经过精心编写,可在尽可能多的浏览器中工作。如果您从 Dreamweaver 操作中手动删除了代码,或将其替换为您自己的代码,则可能会失去跨浏览器兼容性。

尽管 Dreamweaver 操作被编写为可以最大程度地提高跨浏览器兼容性,但某些浏览器完全不支持 JavaScript,并且很多浏览 Web 的人员在其浏览器中关闭了 JavaScript。为了获得最佳的跨平台效果,可提供包括在 <noscript> 标签中的替换界面,以使没有 JavaScript 的访问者能够使用您的站点。

应用调用 JavaScript 行为

“调用 JavaScript”行为在事件发生时执行自定义的函数或 JavaScript 代码行。(您可以自己编写 JavaScript,也可以使用 Web 上各种免费的 JavaScript 库中提供的代码。)

  1. 选择一个对象,然后从“行为”面板的“添加行为”菜单中选择“调用 JavaScript”。
  2. 准确键入要执行的 JavaScript,或键入函数的名称。

    例如,若要创建一个“后退”按钮,您可以键入 if (history.length > 0){history.back()}。如果您已将代码封装在一个函数中,则只需键入该函数的名称(例如 hGoBack())。

  3. 单击“确定”,验证默认事件是否正确。

应用改变属性行为

使用“改变属性”行为可更改对象某个属性(例如 div 的背景颜色或表单的动作)的值。

注意:只有在您非常熟悉 HTML 和 JavaScript 的情况下才使用此行为。

  1. 选择一个对象,然后从“行为”面板的“添加行为”菜单中选择“改变属性”。
  2. 从“元素类型”菜单中选择某个元素类型,以显示该类型的所有标识的元素。
  3. 从“元素 ID”菜单选择一个元素。
  4. 从“属性”菜单中选择一个属性,或在框中输入该属性的名称。
  5. 在“新的值”域中为新属性输入一个新值。
  6. 单击“确定”,验证默认事件是否正确。

应用“检查插件”行为

使用“检查插件”行为可根据访问者是否安装了指定的插件这一情况将他们转到不同的页面。例如,您可能想让安装有 Shockwave 的访问者转到某一页,而让未安装该软件的访问者转到另一页。

注意:不能使用 JavaScript 在 Internet Explorer 中检测特定的插件。但是,选择 Flash 或 Director 后会将相应的 VBScript 代码添加到您的页上,以便在 Windows 的 Internet Explorer 中检测这些插件。Mac OS 上的 Internet Explorer 中不能实现插件检测。

  1. 选择一个对象,然后从“行为”面板的“添加行为”菜单中选择“检查插件”。
  2. 从“插件”菜单中选择一个插件,或者单击“输入”并在相邻的框中键入插件的确切名称。

    您必须使用 Netscape Navigator 的“关于插件”页上以粗体指定的确切插件名称。(在 Windows 中,选择 Navigator 的“帮助”>“关于插件”命令;在 Mac OS 上,从“Apple”菜单中选择“关于插件”。)

  3. 在“如果有,转到 URL”框中,为安装了该插件的访问者指定一个 URL。

    如果指定的是远程 URL,则必须在地址中包括 http:// 前缀。如果保留该域为空,访问者将留在同一页面上。

  4. 在“否则,转到 URL”框中,为没有安装该插件的访问者指定一个替代 URL。如果保留该域为空,访问者将留在同一页面上。
  5. 指定无法检测插件时如何操作。默认情况下,当不能实现检测时,访问者被转到“否则”框中列出的 URL。若要改为将访问者转到第一个(“如果有,转到 URL”)URL,则选择“如果无法检测,总是转到第一个 URL”选项。选择此选项实际意味着“除非浏览器明确指示该插件不存在,否则即假定访问者安装了该插件”。一般而言,如果插件内容对页面来说是必需的,则选择此选项;否则,取消选择此选项。

    注意:此选项只适用于 Internet Explorer;Netscape Navigator 总是可以检测插件。

  6. 单击“确定”,验证默认事件是否正确。

应用拖动 AP 元素行为

“拖动 AP 元素”行为可让访问者拖动绝对定位的 (AP) 元素。使用此行为可创建拼板游戏、滑块控件和其它可移动的界面元素。

您可以指定以下内容:访问者可以向哪个方向拖动 AP 元素(水平、垂直或任意方向),访问者应将 AP 元素拖动到的目标,当 AP 元素距离目标在一定数目的像素范围内时是否将 AP 元素靠齐到目标,当 AP 元素命中目标时应执行的操作,等等。

因为必须先调用“拖动 AP 元素”行为,访问者才能拖动 AP 元素,所以您应将“拖动 AP 元素”附加到 body 对象(使用 onLoad 事件)。

  1. 选择“插入”>“布局对象”>“AP Div”或单击“插入”面板上的“绘制 AP Div”按钮,并在“文档”窗口的“设计”视图中绘制一个 AP Div。
  2. 单击“文档”窗口左下角的标签选择器中的 <body>。
  3. 从“行为”面板的“添加行为”菜单中选择“拖动 AP 元素”。

    如果“拖动 AP 元素”不可用,则您可能已选择了一个 AP 元素。

  4. 在“AP 元素”弹出菜单中,选择此 AP 元素。
  5. 从“移动”弹出菜单中选择“限制”或“不限制”。

    不限制移动适用于拼板游戏和其它拖放游戏。对于滑块控件和可移动的布景(例如文件抽屉、窗帘和小百叶窗),请选择限制移动。

  6. 对于限制移动,在“上”、“下”、“左”和“右”框中输入值(以像素为单位)。

    这些值是相对于 AP 元素的起始位置的。如果限制在矩形区域中的移动,则在所有四个框中都输入正值。若要只允许垂直移动,则在“上”和“下”文本框中输入正值,在“左”和“右”文本框中输入 0。若要只允许水平移动,则在“左”和“右”文本框中输入正值,在“上”和“下”文本框中输入 0。

  7. 在“左”和“上”框中为拖放目标输入值(以像素为单位)。

    拖放目标是您希望访问者将 AP 元素拖动到的点。当 AP 元素的左坐标和上坐标与您在“左”和“上”框中输入的值匹配时,便认为 AP 元素已经到达拖放目标。这些值是与浏览器窗口左上角的相对值。单击“取得目前位置”可使用 AP 元素的当前位置自动填充这些文本框。

  8. 在“靠齐距离”框中输入一个值(以像素为单位)以确定访问者必须将 AP 元素拖到距离拖放目标多近时,才能使 AP 元素靠齐到目标。

    较大的值可以使访问者较容易找到拖放目标。

  9. 对于简单的拼板游戏和布景处理,到此步骤为止即可。若要定义 AP 元素的拖动控制点、在拖动 AP 元素时跟踪其移动以及在放下 AP 元素时触发一个动作,请单击“高级”标签。
  10. 若要指定访问者必须单击 AP 元素的特定区域才能拖动 AP 元素,请从“拖动控制点”菜单中选择“元素内的区域”;然后输入左坐标和上坐标以及拖动控制点的宽度和高度。

    此选项适用于 AP 元素中的图像包含提示拖动元素(例如一个标题栏或抽屉把手)的情况。如果希望访问者可以通过单击 AP 元素中的任意位置来拖动此 AP 元素,请不要设置此选项。

  11. 选择任何要使用的“拖动时”选项:
    • 如果 AP 元素在拖动时应该移动到堆叠顺序的最前面,则选择“将元素置于顶层”。如果选择此选项,请使用弹出菜单选择是将 AP 元素保留在最前面还是将其恢复到它在堆叠顺序中的原位置。
    • 在“调用 JavaScript”框中输入 JavaScript 代码或函数名称(例如 monitorAPelement())以在拖动 AP 元素时反复执行该代码或函数。例如,您可以编写一个函数,用于监视 AP 元素的坐标并在一个文本框中显示提示(如“您正在接近目标”或“您离拖放目标还很远”)。
  12. 在第二个“调用 JavaScript”框中输入 JavaScript 代码或函数名称(例如,evaluateAPelementPos())可以在放下 AP 元素时执行该代码或函数。如果只有在 AP 元素到达拖放目标时才执行 JavaScript,则选择“只有在靠齐时”。
  13. 单击“确定”,验证默认事件是否正确。

收集有关可拖动的 AP 元素的信息

当您将“拖动 AP 元素”行为附加到对象时,Dreamweaver 会将 MM_dragLayer() 函数插入到您的文档的 head 部分。(此函数保留 AP 元素(即“层”)的旧的命名约定,以便保留在以前版本的 Dreamweaver 中创建的层的可编辑性。) 除了将 AP 元素注册为可拖动外,此函数还会为每个可拖动的 AP 元素定义三项属性:MM_LEFTRIGHT、MM_UPDOWN 和 MM_SNAPPED,您可以在自己的 JavaScript 函数中使用这些属性确定 AP 元素的相对水平位置、AP 元素的相对垂直位置以及 AP 元素是否到达拖动目标。

注意:此处提供的信息仅供有经验的 JavaScript 编程人员使用。

例如,以下函数在名为 curPosField 的表单域内显示 MM_UPDOWN 属性(AP 元素的当前垂直位置)的值。(因为表单域都是动态的,即您可以在页完成加载之后更改它们的内容,所以它们非常适合用于显示不断更新的信息。)

function getPos(layerId){ var layerRef = document.getElementById(layerId); var curVertPos = layerRef.MM_UPDOWN; document.tracking.curPosField.value = curVertPos; }

您可以不在表单域中显示 MM_UPDOWN 或 MM_LEFTRIGHT 的值,而用各种其它方法来使用这些值。例如,您可以编写一个函数,根据该值距离拖放区域的远近程度在表单域中显示一条消息,或者您可以调用另一个函数,根据该值显示或隐藏 AP 元素。

如果页上有多个 AP 元素并且必须在所有这些元素都到达它们的目标后访问者才可以前进到下一页或下一个任务,则读取 MM_SNAPPED 属性将特别有用。例如,您可以编写一个函数对 MM_SNAPPED 值为 true 的 AP 元素进行计数,并在每放下一个 AP 元素时都调用该函数。当已靠齐的计数达到所需的数目时,您可以将访问者转到下一页或显示一条祝贺消息。

应用转到 URL 行为

“转到 URL”行为可在当前窗口或指定的框架中打开一个新页。此行为适用于通过一次单击更改两个或多个框架的内容。

  1. 选择一个对象,然后从“行为”面板的“添加行为”菜单中选择“转到 URL”。
  2. 从“打开在”列表中选择 URL 的目标。

    打开在列表自动列出当前框架集中所有框架的名称以及主窗口。如果没有任何框架,则主窗口是唯一的选项。

    注意:如果存在名称为 top、blank、self 或 parent 的框架,则此行为可能产生意想不到的结果。浏览器有时会将这些名称误认为保留的目标名称。

  3. 单击“浏览”选择要打开的文档,或在“URL”框中输入该文档的路径和文件名。
  4. 重复第 2 步和第 3 步在其它框架中打开其它文档。
  5. 单击“确定”,验证默认事件是否正确。

应用跳转菜单行为

当您使用“插入”>“表单”>“跳转菜单”创建跳转菜单时,Dreamweaver 将创建一个菜单对象并向其附加“跳转菜单”(或“跳转菜单转到”)行为。通常不需要手动将“跳转菜单”行为附加到对象。

您可以通过以下两种方式中的任意一种编辑现有的跳转菜单:

  • 可以通过在“行为”面板中双击现有的“跳转菜单”行为编辑和重新排列菜单项,更改要跳转到的文件,以及更改这些文件的打开窗口。
  • 通过选择该菜单并使用“属性”检查器中的“列表值”按钮,您可以在菜单中编辑这些项,就象在任何菜单中编辑项一样。
  1. 如果您的文档中尚无跳转菜单对象,则创建一个跳转菜单对象。
  2. 选择对象,然后从“行为”面板的“添加行为”菜单中选择“跳转菜单”。
  3. 在“跳转菜单”对话框中进行所需的更改,然后单击“确定”。

应用“跳转菜单转到”行为

“跳转菜单转到”行为与“跳转菜单”行为密切关联;“跳转菜单转到”允许您将一个“转到”按钮和一个跳转菜单关联起来。(在您使用此行为之前,文档中必须已存在一个跳转菜单。) 单击“转到”按钮打开在该跳转菜单中选择的链接。通常情况下,跳转菜单不需要一个“转到”按钮;从跳转菜单中选择一项通常会引起 URL 的载入,不需要任何进一步的用户操作。但是,如果访问者选择已在跳转菜单中选择的同一项,则不发生跳转。通常情况下这不会有多大关系,但是如果跳转菜单出现在一个框架中,而跳转菜单项链接到其它框架中的页,则通常需要使用“转到”按钮,以允许访问者重新选择已在跳转菜单中选择的项。

注意:当将“转到”按钮用于跳转菜单时,“转到”按钮会成为将用户“跳转”到与菜单中的选定内容相关的 URL 时所使用的唯一机制。在跳转菜单中选择菜单项时,不再自动将用户重定向到另一个页面或框架。

  1. 选择一个对象用作“前往”按钮(通常是一个按钮图像),从“行为”面板的“添加行为”菜单中选择“跳转菜单开始”。
  2. 在“选择跳转菜单”菜单中,选择“转到”按钮要激活的菜单,然后单击“确定”。

应用打开浏览器窗口行为

使用“打开浏览器窗口”行为可在一个新的窗口中打开页面。您可以指定新窗口的属性(包括其大小)、特性(它是否可以调整大小、是否具有菜单栏等)和名称。例如,您可以使用此行为在访问者单击缩略图时在一个单独的窗口中打开一个较大的图像;使用此行为,您可以使新窗口与该图像恰好一样大。

如果不指定该窗口的任何属性,在打开时它的大小和属性与打开它的窗口相同。指定窗口的任何属性都将自动关闭所有其它未明确打开的属性。例如,如果您不为窗口设置任何属性,它将以 1024 x 768 像素的大小打开,并具有导航条(显示“后退”、“前进”、“主页”和“重新加载”按钮)、地址工具栏(显示 URL)、状态栏(位于窗口底部,显示状态消息)和菜单栏(显示“文件”、“编辑”、“查看”和其它菜单)。如果您将宽度明确设置为 640、将高度设置为 480,但不设置其它属性,则该窗口将以 640 x 480 像素的大小打开,并且不具有工具栏。

  1. 选择一个对象,然后从“行为”面板的“添加行为”菜单中选择“打开浏览器窗口”。
  2. 单击“浏览”选择一个文件,或输入要显示的 URL。
  3. 设置相应选项,指定窗口的宽度和高度(以像素为单位)以及是否包括各种工具栏、滚动条、调整大小手柄等一类控件。如果需要将该窗口用作链接的目标窗口,或者需要使用 JavaScript 对其进行控制,请指定窗口的名称(不使用空格或特殊字符)。
  4. 单击“确定”,验证默认事件是否正确。

应用弹出消息行为

“弹出消息”行为显示一个包含指定消息的 JavaScript 警告。因为 JavaScript 警告对话框只有一个按钮(“确定”),所以使用此行为可以提供用户信息,但不能为用户提供选择操作。

您可以在文本中嵌入任何有效的 JavaScript 函数调用、属性、全局变量或其它表达式。若要嵌入一个 JavaScript 表达式,请将其放置在大括号 ({}) 中。若要显示大括号,请在它前面加一个反斜杠 (\{)。

示例:

The URL for this page is {window.location}, and today is {new Date()}.

注意:浏览器会控制警告消息的显示外观。如果您希望对消息的外观进行更多的控制,可考虑使用“打开浏览器窗口”行为。

  1. 选择一个对象,然后从“行为”面板的“添加行为”菜单中选择“弹出消息”。
  2. 在“消息”框中输入您的消息。
  3. 单击“确定”,验证默认事件是否正确。

应用预先载入图像行为

“预先载入图像”行为可以缩短显示时间,其方法是对在页面打开之初不会立即显示的图像(例如那些将通过行为或 JavaScript 换入的图像)进行缓存。

注意:“交换图像”行为会自动预先加载您在“交换图像”对话框中选择“预先载入图像”选项时所有高亮显示的图像,因此当使用“交换图像”时您不需要手动添加“预先载入图像”。

  1. 选择一个对象,然后从“行为”面板的“添加行为”菜单中选择“预先载入图像”。
  2. 单击“浏览”选择一个图像文件,或在“图像源文件”框中输入图像的路径和文件名。
  3. 单击对话框顶部的加号 (+) 按钮将图像添加到“预先载入图像”列表中。
  4. 对其余所有要在当前页面预先加载的图像,重复第 2 步和第 3 步。
  5. 若要从“预先载入图像”列表中删除某个图像,请在列表中选择该图像,然后单击减号 (–) 按钮。
  6. 单击“确定”,验证默认事件是否正确。

应用“设置框架文本”行为

“设置框架文本”行为允许您动态设置框架的文本,可用您指定的内容替换框架的内容和格式设置。该内容可以包含任何有效的 HTML 代码。使用此行为可动态显示信息。

虽然“设置框架文本”行为会替换框架的格式设置,但您可以选择“保留背景色”来保留页面背景和文本的颜色属性。

您可以在文本中嵌入任何有效的 JavaScript 函数调用、属性、全局变量或其它表达式。若要嵌入一个 JavaScript 表达式,请将其放置在大括号 ({}) 中。若要显示大括号,请在它前面加一个反斜杠 (\{)。

示例:

The URL for this page is {window.location}, and today is {new Date()}.
  1. 选择一个对象,然后从“行为”面板的“添加行为”菜单中选择“设置文本”>“设置框架文本”。
  2. 在“设置框架文本”对话框中,从“框架”菜单中选择目标框架。
  3. 单击“获取当前 HTML”按钮复制目标框架的 body 部分的当前内容。
  4. 在“新建 HTML”框中输入消息。
  5. 单击“确定”,验证默认事件是否正确。

应用“设置容器的文本”行为

“设置容器的文本”行为将页面上的现有容器(即,可以包含文本或其它元素的任何元素)的内容和格式替换为指定的内容。该内容可以包括任何有效的 HTML 源代码。

您可以在文本中嵌入任何有效的 JavaScript 函数调用、属性、全局变量或其它表达式。若要嵌入一个 JavaScript 表达式,请将其放置在大括号 ({}) 中。若要显示大括号,请在它前面加一个反斜杠 (\{)。

示例:

The URL for this page is {window.location}, and today is {new Date()}.
  1. 选择一个对象,然后从“行为”面板的“添加行为”菜单中选择“设置文本”>“设置容器的文本”。
  2. 在“设置容器文本”对话框中,使用“容器”菜单选择目标元素。
  3. 在“新建 HTML”框中输入新的文本或 HTML。
  4. 单击“确定”,验证默认事件是否正确。

应用“设置状态栏文本”行为

“设置状态栏文本”行为可在浏览器窗口左下角处的状态栏中显示消息。例如,您可以使用此行为在状态栏中说明链接的目标,而不是显示与之关联的 URL。访问者常常会忽略或注意不到状态栏中的消息(而且并不是所有的浏览器都提供设置状态栏文本的完全支持);如果您的消息非常重要,请考虑将其显示为弹出消息或 AP 元素文本。

注意:如果在 Dreamweaver 中使用“设置状态栏文本”行为,则不能保证会更改浏览器中的状态栏的文本,因为一些浏览器在更改状态栏文本时需要进行特殊调整。例如,Firefox 需要您更改“高级”选项以让 JavaScript 更改状态栏文本。有关详细信息,请参阅浏览器的文档。

您可以在文本中嵌入任何有效的 JavaScript 函数调用、属性、全局变量或其它表达式。若要嵌入一个 JavaScript 表达式,请将其放置在大括号 ({}) 中。若要显示大括号,请在它前面加一个反斜杠 (\{)。

示例:

The URL for this page is {window.location}, and today is {new Date()}.
  1. 选择一个对象,然后从“行为”面板的“添加行为”菜单中选择“设置文本”>“设置状态栏文本”。
  2. 在“设置状态栏文本”对话框的“消息”框中键入您的消息。

    键入的消息应简明扼要。如果消息不能完全放在状态栏中,浏览器将截断消息。

  3. 单击“确定”,验证默认事件是否正确。

应用设置文本域文字行为

“设置文本域文字”行为可用您指定的内容替换表单文本域的内容。

您可以在文本中嵌入任何有效的 JavaScript 函数调用、属性、全局变量或其它表达式。若要嵌入一个 JavaScript 表达式,请将其放置在大括号 ({}) 中。若要显示大括号,请在它前面加一个反斜杠 (\{)。

示例:

The URL for this page is {window.location}, and today is {new Date()}.

创建命名的文本域

  1. 选择“插入”>“表单”>“文本域”。

    如果 Dreamweaver 提示您添加一个表单标签,请单击“是”。

  2. 在属性检查器中,为该文本域键入一个名称。确保该名称在页上是唯一的(不要对同一页上的多个元素使用相同的名称,即使它们在不同的表单上也应如此)。

应用设置文本域文字

  1. 选择一个文本域,然后从“行为”面板的“添加行为”菜单中选择“设置文本”>“设置文本域文字”。
  2. 从“文本域”菜单中选择目标文本,然后输入新文本。
  3. 单击“确定”,验证默认事件是否正确。

应用显示-隐藏元素行为

“显示-隐藏元素”行为可显示、隐藏或恢复一个或多个页面元素的默认可见性。此行为用于在用户与页进行交互时显示信息。例如,当用户将鼠标指针移到一个植物图像上时,可以显示一个页面元素,此元素给出有关该植物的生长季节和地区、需要多少阳光、可以长到多大等详细信息。此行为仅显示或隐藏相关元素 -- 在元素已隐藏的情况下,它不会从页面流中实际上删除此元素。

  1. 选择一个对象,然后从“行为”面板的“添加行为”菜单中选择“显示-隐藏元素”。

    如果“显示-隐藏元素”不可用,则您可能已选择了一个 AP 元素。因为 AP 元素不接受 4.0 版浏览器中的事件,所以您必须选择另一个对象,例如 <body> 标签或某个链接 (<a>) 标签。

  2. 从“元素”列表中选择要显示或隐藏的元素,然后单击“显示”、“隐藏”、“默认”(恢复默认可见性)。
  3. 对其它所有要更改其可见性的元素重复步骤 2。(您可以通过单个行为更改多个元素的可见性。)
  4. 单击“确定”,验证默认事件是否正确。

此行为从 Dreamweaver CS5 开始已被弃用。

应用交换图像行为

“交换图像”行为通过更改 <img> 标签的 src 属性将一个图像和另一个图像进行交换。使用此行为可创建鼠标经过按钮的效果以及其它图像效果(包括一次交换多个图像)。插入鼠标经过图像会自动将一个“交换图像”行为添加到您的页中。

注意:由于只有 src 属性会受到此行为的影响,您应使用与原始尺寸(高度和宽度)相同的图像进行交换。否则,换入的图像显示时会被压缩或扩展,以使其适应原图像的尺寸。

还有一个“恢复交换图像”行为,可以将最后一组交换的图像恢复为它们以前的源文件。每次将“交换图像”行为附加到某个对象时都会自动添加“恢复交换图像”行为;如果您在附加“交换图像”时选择了“恢复”选项,则您就不再需要手动选择“恢复交换图像”行为。

  1. 选择“插入”>“图像”或单击“插入”面板上的“图像”按钮以插入一个图像。
  2. 在“属性”检查器最左边的文本框中为该图像输入一个名称。

    并不是一定要对图像指定名称;在将行为附加到对象时会自动对图像命名。但是,如果所有图像都预先命名,则在“交换图像”对话框中就更容易区分它们。

  3. 重复第 1 步和第 2 步插入其它图像。
  4. 选择一个对象(通常是您将交换的图像),然后从“行为”面板的“添加行为”菜单中选择“交换图像”。
  5. 从“图像”列表中,选择要更改其来源的图像。
  6. 单击“浏览”选择新图像文件,或在“设定源文件为”框中输入新图像的路径和文件名。
  7. 对所有要更改的其它图像重复第 5 步和第 6 步。同时对所有要更改的图像使用相同的“交换图像”动作;否则,相应的“恢复交换图像”动作就不能全部恢复它们。
  8. 选择“预先载入图像”选项可在加载页面时对新图像进行缓存。

    这样可防止当图像应该出现时由于下载而导致延迟。

  9. 单击“确定”,验证默认事件是否正确。

应用检查表单行为

“检查表单”行为可检查指定文本域的内容以确保用户输入的数据类型正确。通过 onBlur 事件将此行为附加到单独的文本字段,以便在用户填写表单时验证这些字段,或通过 onSubmit 事件将此行为附加到表单,以便在用户单击“提交”按钮时同时计算多个文本字段。将此行为附加到表单可以防止在提交表单时出现无效数据。

  1. 选择“插入”>“表单”或单击“插入”面板上的“表单”按钮以插入一个表单。
  2. 选择“插入”>“表单”>“文本域”或单击“插入”面板上的“文本域”按钮以插入一个文本域。

    重复此步骤以插入其它文本域。

  3. 选择验证方法:
    • 若要在用户填写表单时分别验证各个域,请选择一个文本域并选择“窗口”>“行为”。
    • 若要在用户提交表单时检查多个域,请在“文档”窗口左下角的标签选择器中单击 <form> 标签并选择“窗口”>“行为”。
  4. 从“添加行为”菜单中选择“检查表单”。
  5. 执行下列操作之一:
    • 如果您要验证单个域,请从“域”列表中选择您已在“文档”窗口中选择的相同域。
    • 如果您要验证多个域,请从“域”列表中选择某个文本域。
  6. 如果该域必须包含某种数据,则选择“必需”选项。
  7. 选择下列“接受”选项之一:

    使用任何数据

    检查必需域中包含有数据;数据类型不限。 

    使用电子邮件地址

    检查域中包含一个 @ 符号。

    使用数字

    检查域中只包含数字。

    使用数字从

    检查域中包含特定范围的数字。

  8. 如果选择验证多个域,请对要验证的任何其它域重复第 6 步和第 7 步。
  9. 单击“确定”。

    如果在用户提交表单时检查多个域,则 onSubmit 事件自动出现在“事件”菜单中。

  10. 如果要分别验证各个域,则检查默认事件是否是 onBlur 或 onChange。如果不是,请选择其中一个事件。

    当用户从该域移开焦点时,这两个事件都会触发“检查表单”行为。不同之处在于:无论用户是否在域中键入内容,onBlur 都会发生,而 onChange 仅在用户更改了域的内容时才会发生。如果需要该域,最好使用 onBlur 事件。

更多此类内容

  • 插入或更改动态 HTML 表单菜单
  • 创建框架和框架集