如何在聚焦dijit.form.TextBox或类似小部件时选择所有值文本

Question

我正在寻找一种方式，当聚焦dijit.form.TextBox或扩展/类似小部件（如NumberTextBox，CurrencyTextBox）时，选择其输入DOM节点中的所有文本。

以下节点似乎无法正常工作：

<input type="text" id="widget" dojoType="dijit.form.TextBox" value="a value" />
<script type="text/javascript">
dojo.connect( dijit.byId('widget'), 'onFocus', function() {
    this.textbox.select();
});
</script>

Answer 1

如果你正在使用Dojo 1.4或更高版本，那么在TextBox上已经存在一个名为selectOnClick的属性 - 只需将其设置为true ，它就可以执行您想要的操作。

这可能实际上是您的代码无法正常工作的部分原因，因为从技术上讲，您似乎正在正确使用窗口小部件事件 - 除了this可能不是您想要的，连接事件的方式。

Answer 2

我发现selectOnClick并不总是有用，因为有时一个字段获得焦点而用户没有鼠标点击它。

相反，你可以使用这个：

dijit.byId("widgetId").attr("onFocus", function() { this.focusNode.select(); });

注意：focusNode可能不适用于所有小部件。 每个都可以有自己的自定义方式来引用INPUT元素。 它没有记录FilteringSelect小部件，但它对我来说很好。

Answer 3

有一些阻止此表单正常工作的事情。

首先，dijit.byId（'widget'）将选择Dojo小部件（dijit）对象而不是DOM对象。 此事件和可用方法与底层DOM对象不同。 另一方面，dojo.byId（）选择DOM元素。

其次，“onFocus”不会以DOM事件为目标。 DOM事件需要全部为小写，因此在这种情况下，您将使用“onfocus”。

试试这段代码：

dojo.connect( dojo.byId('widget'), 'onfocus', function() {
    dojo.byId('widget').select();
});

这应该允许它正常工作。 我替换了this.textbox.select（），因为我看不到任何对'this'引用的对象的引用。

在这里试试吧

Answer 4

自Dojo 1.7以来：

require(["dojo/on", "dojo/dom"], function(on, dom){

    //direct domNode id method
    on( dom.byId('widget'), 'focus', function() {
        dom.byId('widget').select();
    });

    //via programmatic widget reference
    on( myWidgetReference.focusNode, 'focus', function() {
        myWidgetReference.focusNode.select();
    });

});

注意：GreenWebDev的注释仍然有效（re：focusNode availability）