請使用支持HTML5的浏覽器查看本頁。
實際應用:http:///tool/color.htm
HTML5的input元素的type屬性增加了不少可能值,color就是一個,下面是一個例子。
代碼如下:
<input type="color"value="#008000" id="keleyicolor">
效果如下,請點擊:
使用jQuery獲取所選的顏色值:
<input type="text" id="keleyivalue" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
<script>
$("#k"+"eleyivalue").val($("#kele"+"yicolor").val());
$("#kele"+"yicolor").on("change",function(){
$("#k"+"eleyivalue").val($(this).val());
})
</script>
選擇完顏色值後,下面就會改變。
使用js獲取選擇的值:
<input type="button" value="點擊這裡顯示選擇的顏色值" onclick="alert(document.getElementById('kel'+'eyicolor').value)" />
效果如下: