1

I am using Jquery-Knob as a control knob to choose values from an array, I use the input as the index of the array and I show other info as the label.

    $(".dial").knob({
        displayPrevious : true,
        'min':0,
        'max': this.arrayList.length -1,
        'format' : (knobText)=>{
            if( isNaN(knobText) ){
                return knobText;
            }
            return this.arrayList[knobText].name;
        },
        'change' : (knobValue)=>{
            // Get the new user index
            console.dir("currentKnobIndex: " + Math.floor(knobValue));
            this.currentKnobIndex = Math.floor(knobValue);
        }
    });

I works good except when I click on the knob label and it get focus to manually write a value. Is there a way to prevent this? The user should just be able to change the values with the mouse/touch. I tried adding "readonly" but it disables for complete the knob.

distante
  • 6,438
  • 6
  • 48
  • 90

1 Answers1

2

By adding "readonly" attribute to the input element you can prevent the editable option through the label. Check the below demo:

Demo

Community
  • 1
  • 1
Soundar
  • 2,569
  • 1
  • 16
  • 24
  • I do not know why, but in my case if I put the `readonly` attribute I can't change the knob value. I have to say, I am using it inside an Ionic2 project. – distante Mar 05 '17 at 19:35
  • I hope you are using the latest version where the problem occurs, in the demo i have used the 1.2.0 version.. So downgrade the version will solve the problem.. Alternatively I achieved the similar requirement through jQuery roundSlider plugin. Check http://jsfiddle.net/soundar24/LpuLe9tr/851/ – Soundar Mar 05 '17 at 19:52
  • That looks quite good. Jquery knob has not been updated in a couple of years as far as I know. I see if there are typings for roundSlider so I can use it with angular2/ionic2. – distante Mar 05 '17 at 20:09