Tooltip on textbox, keypress event not working

3 posts, 0 answers
  1. Bert
    Bert avatar
    29 posts
    Member since:
    May 2012

    Posted 05 Jun 2015 Link to this post

    Hello,

    when i add a tooltip to a textbox it does not fire the keypress event. 

    <div id="example">
        <input class="k-textbox"
                      title="Hello!"
                      data-role="tooltip"
                      data-auto-hide="false"
                      data-position="top"
                      data-bind="events: { show: onShow, hide: onHide, keypress: onKeypress }"/>
     
        <div class="box-col console-section">
            <h4>Console</h4>
            <div class="console"/>
        </div>
    </div>
    <script>
        var viewModel = kendo.observable({
            onShow: function() {
                kendoConsole.log("event :: show");
            },
            onHide: function() {
                kendoConsole.log("event :: hide");
            },
            onKeypress: function() {
                kendoConsole.log("event :: key press");
            }
        });
        kendo.bind($("#example"), viewModel);
    </script>

     

    After removing the tooltip, the keypress event is working as expected.

    removed lines:

    data-role="tooltip"
    data-auto-hide="false"
    data-position="top"

     Dojo Example that demonstrates this problem: http://dojo.telerik.com/AhigA

    Could you be so kind to help us with this issue.

    Kind Regards,

    Bert

     

     

     

     

  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 09 Jun 2015 Link to this post

    Hello Bert,

    The keypress event will not work as the Tooltip widget does not have such event. When you set a widget role to given element, it will be bound with the appropriate widget binding. Thus, in this case the events to which you can bind are those which are applicable for the widget.

    If you want to use the input DOM events, you will need to remove the widget from the element. In the case with the Tooltip you could set the widget at the container element and target the input elements within this container.

    Similar to the following:

    <div data-role="tooltip"
            data-filter="input"
            data-auto-hide="false"
            data-position="top"
            data-bind="events: { show: onShow, hide: onHide }">
      <input class="k-textbox"
            title="Hello!"                 
            data-bind="events: {  keypress: onKeypress }"/>
    </div>

     

    Regards,
    Rosen
    Telerik
     
    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. Bert
    Bert avatar
    29 posts
    Member since:
    May 2012

    Posted 09 Jun 2015 in reply to Rosen Link to this post

    Hello,

    it tried this solution and it is working as expected. Thank you for your clear answer. 

    Kind regards,

    Bert

Back to Top