如何让jscolor colorpicker在div上工作？

我使用jscolor colorpicker这只能连接到按钮元素或输入element.I想使用它的div.I尝试这种way-如何让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，它在chrome中创建了一些问题，如果我点击圆圈，没有任何事情发生，但是如果我在圆圈外单击，则颜色选取器会切换。

所以，我想用div代替按钮，当我点击div时打开colorpicker。请帮忙。谢谢你在前进:-)

来源

2017-05-19 APL

使用'input'而不是div并使用'readonly'属性不会有帮助吗？ –

好像插件不支持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。

来源

2017-05-19 12:58:22

非常感谢你:-)。我没有注意到这一点。它有助于。 – APL

如何让jscolor colorpicker在div上工作？

回答

相关问题