为输入字段注册自定义焦点事件处理程序的最佳实践 [英] Best practice to register custom focus event handler for input fields

问题描述

遗憾的是，我没有找到可以在 XML 视图中注册处理程序的 sap.m.Input 或 sap.m.TextArea 的任何焦点事件.

您的最佳做法是什么，例如如果您有近 100 个字段，并且其中大部分应该处理 focus 事件，以便自动选择输入字段中的文本?

通常，我尽量避免在每个输入字段(也循环)的控制器中注册 focusin 处理程序，但似乎没有其他可用的可能性，不是吗?

我想要的是一种可能性，当我导航时，例如使用键盘通过带有输入字段的表格，每次当我按 tab 或 updown 箭头键跳转到下一个输入字段时，应选择输入字段的全部内容.

示例:

1. 打开这个表格示例.
2. 点击编辑.
3. 使用 Tab 键时，它会自动选择文本.但它不适用于 updown 箭头键和 sap.m.Input 类.

解决方案

这是一个扩展 sap.m.Input 的工作示例，它选择焦点上的文本:https://embed.plnkr.co/98BIbMEIujbzBXqU

<块引用>

Input.extend("demo.control.Input", {焦点:函数(){if (typeof Input.prototype.onfocusin == "function") {Input.prototype.onfocusin.apply(this, arguments);}this.getDomRef("inner").select();},//...});

注意: sap.m.InputBase 提供 API selectText(iStart, iEnd).但是，根据 HTML 规范 以及 API 参考:

<块引用>

_selectText

仅支持Text、Url、Tel和Password的输入控件类型.

由于我们的目标是选择输入字段(不是范围)内的所有文本，而不考虑类型，domElement.select()^api 代替.

Sadly, I don't find any focus event for sap.m.Input or sap.m.TextArea to which I can register handlers in XML view.

What are your best practices e.g. if you have nearly 100 fields and most of them should handle focus event so that the text within the input field gets automatically selected?

Normally, I try to avoid to register the focusin handler in controller on every input field (also looping) but it seems that there are no other possibilities available isn't it?

What I want is a possibility, that when I navigate e.g. with keyboard through a table with input fields, every time when I press the tab or updown arrow keys to jump to next input field, the whole content of the input field should be selected.

Example:

1. Open this table sample.
2. Click on Edit.
3. When tabbing, it automatically selects the text. But it doesn't work with updown arrow keys and with sap.m.Input class.

解决方案

Here is a working example of an extended sap.m.Input that selects the text on focus: https://embed.plnkr.co/98BIbMEIujbzBXqU

Input.extend("demo.control.Input", {
  onfocusin: function() {
    if (typeof Input.prototype.onfocusin == "function") {
      Input.prototype.onfocusin.apply(this, arguments);
    }
    this.getDomRef("inner").select();
  },
  // ...
});

Note: sap.m.InputBase provides the API selectText(iStart, iEnd). However, that API doesn't support Input controls with type Number according to the HTML spec as well as API reference:

_selectText

Only supported for input control's type of Text, Url, Tel and Password.

Since our goal is to select all text within the input field (not a range) regardless of the type, domElement.select()^api can be used instead.

这篇关于为输入字段注册自定义焦点事件处理程序的最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！