Show the input-field, but make it non-clickable...

[vigorouscoding]

...therefor making the knob clickable on the whole canvas.

This basically means that the input field only displays the value, but you can not (by clicking - tabbing still works) enter the input field.

I did this by adding two CSS-rules: canvas has z-index=1 the input-field has z-index=-1 Basically it works while the canvas z-index > input-field z-index.

This is quite hacky though. I would like to see a configuration option for that. Something like "allowClickInInputField" (I am terrible at naming stuff) would be very much appreciated. If I find the time I will fork your repo and add this myself. So far thanks for this great plugin!

[vigorouscoding]

and you can disable tabbing into the input field by setting tabindex="-1"

I do like that because now the complete canvas receives my clicks and the input field doesn't get in the way

[Tropicalista]

+1

[bromy]

Agreed. I also had to hack around it with CSS.

On mobile, its a pretty bad user experience when you accidentally click on the number in the middle and a keyboard shows up out of nowhere, asking for input. It's unexpected functionality that should probably not be there.

https://github.com/aterrien/jQuery-Knob/pull/137 is a pull request for using non elements as the target. That seems like it would solve this issue as well.

[jtara]

On iOS UIWebView, I found that just setting tabindex='-1' is not sufficient, at least for the next/previous icons on the virtual keyboard extension.

• You also need to set the tab order of the other inputs in the document!
• You need some pointer-events:none CSS.
• You need to prevent focus in JS, because all tabindex='-1' really does is move the input to the end of the sequence.

It's still a bit of a kludge, because when you reach the last field, you will still have an active "next" arrow icon. Tap it, and then the virtual keyboard will go away.

  .dial {
    pointer-events: none;
  }

    $(document).on('focus', '.dial', function(event) {
      var $input = $(this);
      $input.blur();
      event.preventDefault();
    });

I wanted to find a solution that doesn't modify the source, so used the above. Really, there should be a separation of disabling the input fields vs disabling input altogether (e.g. by mouse/touch swiping).