Value changed although readOnly is true

[githubjeka]

 <input value="0.648" class="dial1" data-readOnly="true">

$(".dial1").knob();

Clicked by input

Clicked in any place and get 1

P.S. chrome browser

[gvinson]

Try data-readonly, no capital O. In the code it is looking for the data attr "readyonly". I just tested it and it worked for me. @githubjeka

[githubjeka]

In https://github.com/aterrien/jQuery-Knob#options described readOnly. Ok when I tried readonly: true then input hasn't readyonly and value can be changed.

<div style="display: inline; height: 110.88px; width: 110.88px;">
<canvas width="110" height="110.88"></canvas>
<input value="0.05" class="knob" data-fgcolor="#f39c12" style="width: 59px; height: 36px; position: absolute; vertical-align: middle; margin-top: 36px; margin-left: -85px; border: 0px; font-weight: bold; font-style: normal; font-variant: normal; font-stretch: normal; font-size: 18px; line-height: normal; font-family: Arial; text-align: center; color: rgb(243, 156, 18); padding: 0px; -webkit-appearance: none; background: none;">
</div>

when '$(".knob").knob({max:' . $maxLoad . ', readOnly: true, width:"77%", thickness: 0.1,});'

<div style="display: inline; height: 110.88px; width: 110.88px;">
<canvas width="110" height="110.88"></canvas>
<input value="0.05" class="knob" data-fgcolor="#f39c12" readonly="readonly" style="width: 59px; height: 36px; position: absolute; vertical-align: middle; margin-top: 36px; margin-left: -85px; border: 0px; font-weight: bold; font-style: normal; font-variant: normal; font-stretch: normal; font-size: 18px; line-height: normal; font-family: Arial; text-align: center; color: rgb(243, 156, 18); padding: 0px; -webkit-appearance: none; background: none;">
</div>

But when clicked as described above then readonly doesn't work for float of value.

[Jaskey]

I encontered the same problem too, the existing version seems not to support floating number. So I use a number which is [0,1000] to represent a floating number (n * 1000), and at the fortmat hook function, format it like value*0.001. Also , you may need to override the the parse hookmethod: parse:function(v): to parse the floating value back to the value repenting from [0,1000], here is a SO link: http://stackoverflow.com/questions/30881466/wrong-value-passed-to-format-hook-function-after-set-value-jquery-knob

[ghernandezr]

I debug the library, and the problem is that trigger a 'blur' event when you click several times

[ghernandezr]

i change the code in line 175 -176 and add if (ev.type == "blur" && $(this).prop("readonly")) return; :

...
this.$.bind(
                'change blur',
                    function(ev) {
                        if (ev.type == "blur" && $(this).prop("readonly")) return;
                        s.val(s._validate(s.o.parse(s.$.val())));
                        var v = s._validate(s.o.parse(s.$.val()));
                        if (s.cH && s.cH(v) === false) return;
                        s.val(v);

                    }
                );
...

and this solve the problem for me, meybe something like this is needed in the other blur event, i dont test that

[madebysquares]

I ran into this problem and you solution worked great. thanks @ghernandezr

[andrehschmid]

Had the same problem. Solved including the attribute disabled="disabled" in the input tag, it avoided the calling of any knob event.