Как заставить jscolor colorpicker работать с div?

Я использую jscolor colorpicker, который можно прикрепить только к элементу кнопки или элементу ввода. Я хочу использовать его для div. Я пробовал так:

https://jsfiddle.net/anuranpal/Lead7c7q/43/

CSS

edit-color-container {
    border: 1px solid gainsboro;
    height: 70px;
    width: 70px;
    text-align: center;
}

.select-button {
    background: none!important;
    border: none;
    padding: 0!important;
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
    -moz-user-select: none;
    -webkit-user-select: none;
    /* this will work for QtWebKit in future */
    -webkit-user-drag: none;
}

.selected-color-container {
    -moz-border-radius: 50px/50px;
    -webkit-border-radius: 50px 50px;
    border-radius: 50px/50px;
    width: 35px;
    height: 35px;
    background: #DF068C;
    display: inline-block;
    vertical-align: top;
    margin: auto;
    margin-top: 5px;
    position: relative;
}

HTML

<div class="edit-color-container">
    <input id="selected-color-value" type="hidden" value="#DF068C" />
    <button id="editColor" class="select-button jscolor " data-jscolor="
  {width:150, height:150,valueElement:'selected-color-
  value',styleElement:'selectedColor',borderWidth:0,borderColor:'#FFF', 
   insetWidth:0, insetColor:'#FFF',shadow:false, 
   backgroundColor:'#e6e7e9',borderRadius:2, zIndex:'2000'}">
        <div class="selected-color-container" id="selectedColor"></div>
        <div class="uk-text-small uk-text-primary uk-margin-small-top" style="margin:auto">Edit</div>
    </button>
</div>

Но здесь я использовал кнопку вместо div, и это создает некоторые проблемы в хроме, например, если я нажимаю на круг, ничего не происходит, но если я нажимаю сразу за пределами круга, переключается палитра цветов.

Итак, я хочу использовать div вместо кнопки и открывать colorpicker, когда я нажимаю на div. Пожалуйста помоги. Заранее спасибо :-)


javascript button google-chrome jscolor
person APL    schedule 19.05.2017    source источник
comment
Использование input вместо div и использование атрибута readonly не помогает?   -  person Mehdi Dehghani    schedule 19.05.2017

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, что плагин не поддерживает div, но с помощью его API вы можете переключать colorpicker с помощью кода, если я вас правильно понял, вот мое решение:

HTML

<div class="edit-color-container">
    <div id="styleSpan" style="background-image: none; background-color: rgb(186, 243, 255); color: rgb(0, 0, 0);"
    onclick="document.getElementById('color-picker').jscolor.show()"></div>
    <div id="btn" onclick="document.getElementById('color-picker').jscolor.show()">Edit</div>
    <input id="color-picker" class="jscolor {styleElement:'styleSpan',value:'DF068C'}" type="hidden">
</div>

CSS

.edit-color-container {
    border: 1px solid gainsboro;
    height: 70px;
    width: 70px;
    text-align: center;
}

#styleSpan {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin: 5px auto;
    cursor: pointer;
}

#btn {
    cursor: pointer;
}

body > div:last-child {
    margin: 50px 0 0 20px;
}

jsfiddle

Обратите внимание, что вы можете использовать onclick вместо edit-color-container.

person Mehdi Dehghani    schedule 19.05.2017
comment
Большое спасибо :-). Я этого не заметил. Помогает. - person APL; 19.05.2017