Select text on focus

12 posts, 0 answers
  1. EDWARD
    EDWARD avatar
    3 posts
    Member since:
    Dec 2010

    Posted 09 Jan 2012 Link to this post

    How can I select the textbox's contents when it receives the focus.  Ordinarily, I would call select() within jQuery's focus event handler.  However, this does not work with the numeric textbox.  I presume this is because the input that ultimately receives focus has style display:none when the page is loaded.
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 10 Jan 2012 Link to this post

    Hello Edward,

     
    You will need to use setTimeout to achieve your goal. Check this jsFiddle demo.

    All the best,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. EDWARD
    EDWARD avatar
    3 posts
    Member since:
    Dec 2010

    Posted 12 Jan 2012 Link to this post

    Thanks.

    I used this in a more general approach to the problem:

    $('.k-input').on('focus', function () {
            var input = $(this);
            setTimeout(function () { input.select(); });
        });
  5. Fernando Nogues
    Fernando Nogues avatar
    1 posts
    Member since:
    Oct 2009

    Posted 10 Apr 2012 Link to this post

    This is working great for me, thanks EDWARD.

    In my opinion this should be the default behavior as it is for other regular inputs.
  6. Mike
    Mike  avatar
    10 posts
    Member since:
    Aug 2012

    Posted 16 Oct 2012 Link to this post

    The standard behavior of selecting all text when tabbing into an input should work with the NumericTextBox both inside and outside of a Kendo Grid, and should be built into Kendo.

    We have created a UserVoice entry for this - go vote on it if you agree!
  7. z
    z avatar
    1 posts
    Member since:
    Jan 2013

    Posted 19 Feb 2013 Link to this post

    if you want to use this behavior of selecting all text in NumericTextBox inside a Kendo Grid, create a editor for the column:
      { field: "Budget", title: "Budget",  editor: editNumberWithoutSpinners }

        function editNumberWithoutSpinners(container, options) {
                    var fld = $('<input data-text-field="' + options.field + '" ' +
                'data-value-field="' + options.field + '" ' +
                'data-bind="value:' + options.field + '" ' +
                'data-format="' + options.format + '"  />');
                    fld.focus(function () {
                        this.select();
                    });
                    fld.appendTo(container)
                    fld.kendoNumericTextBox({
                        spinners: false
                    });
                }

  8. Robert
    Robert avatar
    6 posts
    Member since:
    Jan 2013

    Posted 02 Apr 2013 Link to this post

    Attempting to select text on focus, but in a grid field. Here's a jsbin: http://jsbin.com/ekegas/2/edit
    In this simple grid, trying to set the 'name' column text when in focus, but its not working, even with the timeout.
    What am I missing?
  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 05 Apr 2013 Link to this post

    Hi Robert,

    In your case the combo is bound to remote data, this means that the widget will populate after data is received. You should bind to the dataBound event of the combo and select the text of its input element.
    editor:function categoryDropDownEditor(container, options) {
       $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
       .appendTo(container)
       .kendoComboBox({
         autoBind: false,
         dataSource: {
           type: "odata",
           transport: {
           }
         },
         dataBound: function() {
           var combo = this;
           setTimeout(function() {
             combo.input.select();
           }, 0);
         }
       });
    }

    It is also required to wrap the select logic inside a time out, because the text is actually set after dataBound triggers.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Shea
    Shea avatar
    58 posts
    Member since:
    Feb 2013

    Posted 22 Apr 2013 Link to this post

    I used z's suggestion to fix this for myself. But this really should be the default behaviour. 

    A very common use case if for users to tab between fields, then tab to the next field. Especially when these editors are part of a grid (which is also common). With this bug users must tab into the field, backspace the existing characters (or in IE del them, weird that they are different). Totally destroying the rapid input use case.

    Here's to hoping this gets fixed in 2013.2.

    ~S
  11. Atlas
    Atlas avatar
    97 posts
    Member since:
    Jun 2009

    Posted 29 May 2013 Link to this post

    I agree, this should be the default behavior. In addition, it would be nice to have a configuration setting for it so that you can easily do what you want. The RadNumericTextbox works this way.
  12. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 30 May 2013 Link to this post

    Hello,

     We cannot modify the default behavior because it would be a breaking change. We recommend opening a new feature request in our feedback portal.

    Regards,
    Atanas Korchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Daniel
    Daniel avatar
    17 posts
    Member since:
    Jan 2014

    Posted 14 Aug 2014 Link to this post

    Hi,

    one year later and the same odd (annoying) behavior.
    This behavior makes end-users crazy!


    Please vote up for this:
    http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/3264987-automatically-select-all-when-tabbing-into-the-num


    Regards,
    Daniel

    PS: Such a behavior doesn't have to be in such good UI control set.
Back to Top
Kendo UI is VS 2017 Ready