Dojo：dojo onblur 事件

Posted 2023-02-16

技术标签:

【中文标题】Dojo：dojo onblur 事件【英文标题】：Dojo: dojo onblur events 【发布时间】：2011-01-11 21:05:35 【问题描述】：

我有一个使用 dojo 1.5 的表单设置。我正在使用 dijit.form.ComboBox 和 dijit.form.TextBox

组合框具有“汽车”、“自行车”、“摩托车”等值，文本框是组合框的形容词。因此，Combobox 中的内容并不重要，但如果 ComboBox 确实具有值，则必须在 TextBox 中填充某些内容。可选地，如果 ComboBox 中没有任何内容，则 TextBox 中也没有任何内容，这很好。事实上，如果 Combobox 中没有内容，则文本框中必须没有任何内容。

在常规编码中，我只会在文本框上使用 onBlur 事件来转到检查 ComboBox 是否有值的函数。我在道场看到这不起作用...代码示例如下...

Vehicle:
    <input dojoType="dijit.form.ComboBox"
      store="xvarStore"
      value=""
      searchAttr="name"
      name="vehicle_1"
      id="vehicle_1"
    />
 Descriptor:
<input type="text"
                dojoType="dijit.form.TextBox"
                value=""
                class=lighttext
                style="width:350px;height:19px"
                id="filter_value_1"
                name="filter_value_1"
                />

我最初的尝试是在描述符的标记中添加一个 onBlur，但发现这不起作用。

Dojo 如何处理这个问题？是通过 dojo.connect 参数吗？即使在上面的示例中，组合框的 id 为“vehicle_1”，文本框的 id 为“filter_value_1”，但仍可能有许多组合框和文本框按顺序向上编号。（vehicle_2、vehicle_3 等）

任何建议或资源链接将不胜感激。

【问题讨论】：

【参考方案1】：

要添加 onBlur 事件，您应该使用 dojo.connect()：

dojo.connect(dojo.byId("vehicle_1"), "onBlur", function()  /* do something */ );

如果您需要连接多个输入，请考虑为需要模糊的输入添加自定义类，并使用 dojo.query 连接到所有输入：

Vehicle:
    <input dojoType="dijit.form.ComboBox"
      store="xvarStore"
      class="blurEvent" 
      value=""
      searchAttr="name"
      name="vehicle_1"
      id="vehicle_1"
    />

dojo.query(".blurEvent").forEach(function(node, index, arr) 
      dojo.connect(node, "onBlur", function()  /* do something */ );
  );

在传递给 dojo.connect 的函数中，您可以添加一些代码以去除末尾的数字，并使用它来引用每个 filter_value_* 输入以进行验证。

dojo.connect()

Combobox documention

【讨论】：

【参考方案2】：

onBlur 对我来说似乎工作得很好，即使在 html 声明的小部件中也是如此。这是一个非常基本的示例：

http://jsfiddle.net/kfranqueiro/BWT4U/

（打开 firebug/webkit 检查器/IE8 开发工具以查看 console.log 消息。）

但是，为了更理想的解决方案，您可能还对其他一些小部件感兴趣...

http://dojotoolkit.org/reference-guide/dijit/form/ValidationTextbox.html http://dojotoolkit.org/reference-guide/dijit/form/Form.html

希望这可以帮助您入门。

【讨论】：