设置一个带有 JQuery 掩码的文本字段答案

【问题标题】：Setting a text field that has a JQuery mask on it设置一个带有 JQuery 掩码的文本字段
【发布时间】：2013-07-09 17:42:15
【问题描述】：

使用 watir-webdriver，我正在尝试设置文本字段的值。

browser.text_field(:id, "phoneNumbers_value_input").set("5555551234")

当我运行该命令时，我可以看到 watir 找到了该字段，因为光标设置在该字段上但是没有输入任何文本。我也尝试了 send_keys 和 append 命令，但似乎没有任何效果。这些方法不会引发异常。

我能找到的这个字段和页面上其他字段（都可以正常工作）之间的唯一区别是它上面有这个 JQuery 掩码。

$(selector).mask("(999) 999-9999");

关于如何设置文本字段的任何想法？

编辑：

更多的 Javascript：

selector = '#' + id(field.id) + '_input';
if (field.format == 'phone') {
  $(selector).mask("(999) 999-9999");
}

字段的HTML：

<div id="phoneNumbers_value_form_item" class="form_item validated no_focus">
  <label for="phoneNumbers_value" class="form_label">phone</label>
  <input type="text" value="" name="phoneNumbers[][value]" id="phoneNumbers_value_input" class="text">
  <div class="tip">&nbsp;</div>
  <div class="tip_validating">

  </div>
  <div class="tip_error">

  </div>
</div>

【问题讨论】：

请提供相关的 HTML 或页面链接（或类似的）。
@Željko digitalbush.com/projects/masked-input-plugin/#demo（虽然这不是我的网站）
@juan2raid，我相信@Z 是在向您的页面而不是插件站点请求<HTML> :) p.s.我在很多项目中使用这个插件...
@pixelbobby 我提供的网站有一个字段演示。该网站上的电话号码字段与我的网站完全相同。
@juan2raid，是的，但我们不知道在这种情况下 selector 是什么。我们需要看到更多你的代码，伙计。

标签： ruby watir watir-webdriver

【解决方案1】：

我在您提供的 HTML 中没有看到任何与您帖子顶部的 ruby 代码中所寻址的文本输入字段相匹配的元素。例如没有任何 ID 为“电话”的内容

根据您问题中的 HTML，我希望以下内容可以正常工作

browser.text_field(:id, "phoneNumbers_value_input").set("5555551234")

查看您在 cmets 中链接的示例页面，当我在 ID 为“电话”的输入字段上使用谷歌浏览器和“检查元素”功能时，我看到有许多事件侦听器与字段（模糊、焦点、输入、keydown、keypress、取消屏蔽）

“焦点”特别引起了我的注意，在该字段上看到它让我觉得您可能需要先针对同一元素触发一个事件，例如 onfocus 事件，以激活字段，然后尝试设置值。

您会注意到，当您手动操作时，该字段开始为空白，但一旦获得焦点，它就会向用户显示输入掩码的格式，这很可能需要首先发生，在它看到任何类型的输入之前。

编辑：在这种情况下，根据提问者的反馈，答案是他们需要首先针对文本字段触发“取消屏蔽”事件，然后 .set 设置他们想要的值，以便自动化测试时可以正常工作的事情。这不会行使字段屏蔽功能，但是我再次怀疑这种情况下的测试任务是广泛测试第 3 方（JQuery）插件，他们更关心后端的业务逻辑等，因此简单能够在没有屏蔽代码妨碍的情况下设置值是所需要的。

【讨论】：

为了清楚起见，我简化了第一行的变量名。在进行包含 HTML 的编辑后，我忘记更改 id 值以匹配 HTML。我的代码包含正确的 id 值。
+1 这个答案让我找到了正确的解决方案。触发“onfocus”事件没有任何效果，但“unmask”使它起作用。掩码不会显示，但是将设置字段的值。 browser.text_field(:id, "phoneNumbers_value_input").fire_event("unmask")
那么您必须先触发 unmask，然后设置值，还是设置值然后触发 unmask？
解除掩码，然后设置值。
酷。好的，我已经编辑了“答案”以反映这一点。如果您可以在上面打勾（接受答案），那么问题将显示为已回答，其他有相同问题的人将更快地被引导到该问题的有效解决方案。

【解决方案2】：

问题与关注文本字段有关。即使使用 .click() ，webdriver 也会在输入字段的末尾出现光标（请参阅issue 2377）。按 HOME 键将光标移动到开头并允许您在输入字段中键入，并且仍然具有掩码功能。

在 Java 中：

WebElement txtPhone = getDriver().findElement(By.id("phoneNumbers_value_input"));
txtPhone.sendKeys(org.openqa.selenium.Keys.HOME);
txtPhone.sendKeys(phoneNumber);

【讨论】：