如何從JS代碼

觸發顏色對話框我有如何從JS代碼

<input type="color" id="colorDialogID"> 
<div id="textToColorID">Text to color</div> 
<input type="button" id="setColorButtonID">

，我通過點擊按鈕來顯示顏色對話框想。而當我選擇特定的顏色並按下'確定'，一些文本來獲得選擇的顏色。

我需要爲這個js代碼。我現在用google搜索了將近一個小時，找到了一種如何從代碼中顯示代碼選擇器窗口的方法，但沒有成功。我只得到一些插件。我不明白爲什麼一切都必須如此複雜javascript。

來源

2017-08-07 ivan golubar

分享一些你的'js'代碼，這樣我們就可以看到你想要做什麼。問題很難理解。 –

OK，以供將來參考這是一件好事，爲您的代碼片段 - 甚至更好的jsfiddle鏈接，但是這是我現在得到。

document.getElementById("setColorButtonID").addEventListener("click", function() { 
 
    document.getElementById("colorDialogID").focus(); 
 
    document.getElementById("colorDialogID").value = "#FFCC00"; //Set the default color NOTE: Remove the line to get the default of #000000 
 
    document.getElementById("colorDialogID").click(); 
 
}); 
 

 
function getColor() { 
 
    var color = document.getElementById("colorDialogID").value; 
 
    document.getElementById("textToColorID").style.color = color; 
 
}

#colorDialogID { 
 
    position: absolute; 
 
    visibility: hidden; 
 
}

<input type="color" id="colorDialogID" onchange="getColor(this)"> 
 
<div id="textToColorID">Text to color</div> 
 
<input type="button" id="setColorButtonID" value="Edit Color">

我可以添加一些註釋代碼，如果你想逐行解釋 - 但這應該工作。

希望它能幫助:)

來源

2017-08-07 21:30:26

我需要一個按鈕，因爲這是向我展示如何從JavaScript代碼來觸發，稱之爲「拾色器對話框中的」最簡單的方法。而且我不想使用顏色選擇器作爲按鈕，因爲它看起來不像按鈕。用戶不會將其視爲按鈕。爲什麼我應該在CSS上工作來更改顏色選擇器按鈕。 –

我用的提示對話框，在我指導我的應用程序的用戶：「之所以選擇顏色......」所以，當點擊「確定」後拾色器有出現。 –

@ivangolubar看到我上面的編輯。您也可以通過點擊「運行代碼段」按鈕，在底部:) –

-1

看看jscolor。它很簡單，你可以很容易地找到你正在尋找的功能。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script> 
 

 
Color: <input class="jscolor" value="ab2567">

來源

2017-08-07 21:40:09 Zulfe

如何從JS代碼

回答

相關問題