禁止在jquery-knob上手动输入

Question

我使用Jquery-Knob作为控制旋钮从数组中选择值，使用输入作为数组的索引，并将其他信息显示为标签。

    $(".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);
        }
    });

我工作得很好，除了当我点击旋钮标签时，它会获得焦点，以手动写入一个值。有没有办法防止这种情况发生？用户应该能够通过鼠标/触摸来更改这些值。我尝试添加"readonly“，但它禁用了完成旋钮。

Answer 1

通过向输入元素添加"readonly“属性，您可以通过标签阻止可编辑选项。查看下面的demo：

Demo