尝试使用 JavaScript Snippet 小部件在 Mendix 中以编程方式触发 Enter答案

【问题标题】：Trying to trigger Enter programmatically in Mendix with a JavaScript Snippet Widget尝试使用 JavaScript Snippet 小部件在 Mendix 中以编程方式触发 Enter
【发布时间】：2019-09-21 21:26:07
【问题描述】：

我有一个带有搜索功能的 DataGrid，我希望网站在搜索栏中按下每个键时自动刷新网格，就像现代搜索引擎一样。想象一下，就像在按下每个键后按回车键，或单击搜索按钮。 Mendix 的唯一方法是使用外部小部件（不能使用它们，因为它们中的大多数都无法在数据库中搜索相关实体）或使用我所做的 JavaScript 片段。

我已经尝试以编程方式按 Enter 键，但我无法获取代码来执行此操作。

我尝试的另一个选项是在按下每个键后以编程方式单击搜索栏，这本身就有效，但这里的问题是选择跳出输入字段并进入搜索按钮，并且搜索中也没有输入场地。

选项 1：以编程方式点击搜索按钮

定义页面元素

var dataGrid = document.querySelector('.mx-datagrid.mx-name-grid1');
var itemsSelect = dataGrid.querySelector('.mx-grid-search-input.mx-name-searchField1')
var searchButton = dataGrid.querySelector('.mx-grid-search-controls > button.mx-grid-search-button')

定义函数

function clickSearchButton() {
searchButton.click();
};

通过输入中的每个更改触发函数

itemsSelect.onkeypress = function(){clickSearchButton};

选项 2：以编程方式按 Enter

它与上面的代码几乎相同，也是我更喜欢的方式。

我尝试了许多变体，但最终我想要的唯一东西应该是这样的：

itemsSelect.onkeypress = function(){*call a function to programmatically press enter*};

我尝试了来自各地的解决方案，例如：

Is it possible to simulate key press events programmatically?

I want to press enter key by programmatically when user do some stuff in js

和许多其他来源，一些声称由于安全原因这是不可能的。这是真的吗？

大约两周以来，我一直在尝试解决这个问题，但几乎没有成功。我是否忽略了任何事情，还有其他我没有想到的解决方案吗？不使用 Mendix 不是一个选项。这是一个巨大的工作项目。

【问题讨论】：

标签： javascript jquery mendix

【解决方案1】：

首先，找出你感兴趣的文本字段和按钮的类和id。通常以mx-name-前缀开头。在本例中，它们被称为 mx-name-confirmPasswordInput 和 mx-name-confirmChangePassword。

然后，使用 HTML Snippet 自定义小部件在您的页面中插入这段 Javascript：

(function() {
    document.addEventListener("keydown", function(e) {
        if (e.keyCode !== 13) return; // ignore if the pressed key is not 'Enter' key.
        var inputField = document.querySelector(".mx-name-confirmPasswordInput input");
        var btn = document.querySelector(".mx-name-confirmChangePassword");
        if (inputField && btn && document.activeElement === inputField) {
            inputField.blur && inputField.blur(); // not necessary any more in 7.22 and up
            btn.click();
        }
    });
})();

这应该可以解决问题！

【讨论】：