如何获得拾色器在Internet Explorer

如何获得在IE11 颜色选择器中我得到的IE11只是文本框，当我键入如何获得拾色器在Internet Explorer

<input type="color" name="clr1" value=""/>

上面的代码工作正常，在铬，但在IE中它是shwoing只是文本框。

来源

2014-12-03 Ravi

检查此http://stackoverflow.com/a/12456164/1982680 – 2014-12-03 08:00:16

http://caniuse.com/#feat=input-color – Andreas 2014-12-03 08:00:41

您可以使用COLOR PICKER - JQUERY PLUGIN为相同。这里是链接：http://www.eyecon.ro/colorpicker/#about – 2014-12-03 08:02:18

您可以尝试Native Color Picker Polyfill作为Internet Explorer上HTML5的“颜色”输入类型。请参阅：nativeColorPicker

HTML代码

<!doctype html> 
<title>Demo - Native Color Picker</title> 
<style>body{font-family:verdana;background-color:#ebebeb;padding:30px}h1{font-family:'Trebuchet MS';font-weight:700;font-size:30px;margin-bottom:20px}#content{background-color:#fff;border:3px solid #ccc;padding:20px}p{margin:20px 0}input{position:relative;top:10px}label{cursor:pointer;font-size:14px}</style> 

<h1>Native Color Picker</h1> 

<div id="content"> 
    <p> 
    <label>Choose a color: <input type="color" id="color"></label> 
    <button id="btn_color">get value</button> 
    </p> 
    <p> 
    <label>Choose another color: <input type="color" id="color2"></label> 
    <button id="btn_color2">get value</button> 
    </p> 
</div> 

<!-- fork me on Github --> 
<a href="http://github.com/dciccale/nativeColorPicker"><img style="position: absolute; top: 0; right: 0; border: 0" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> 

<!-- include the plugin --> 
<script src="nativeColorPicker.js"></script> 
<script> 
(function() { 
    // init the plugin 
    window.nativeColorPicker.init('color'); 
    window.nativeColorPicker.init('color2'); 
    // demo buttons.. move along 
    var $=function(id){return document.getElementById(id)},alertColor=function(){alert($(this.id.split('_')[1]).value);}; 
    $('btn_color').onclick = alertColor; 
    $('btn_color2').onclick = alertColor; 
}()); 
</script>

** Javascript代码**

(function (window) { 
    var document = window.document, 
    nativeColorPicker = { 
     // initialized flag 
     started: false, 

     // start color 
     color: '#000000', 

     // inputs where plugin was initialized 
     inputs: {}, 

     // flag to know if color input is supported 
     hasNativeColorSupport: false, 

     // inits the plugin on specified input 
     init: function (inputId) { 
     // start the plugin 
     this.start(); 

     if (this.hasNativeColorSupport) { 
      return; 
     } 

     if (typeof inputId !== 'string') { 
      throw 'inputId have to be a string id selector'; 
     } 

     // set the input 
     this.input = (this.inputs[inputId] = this.inputs[inputId]) || document.getElementById(inputId); 

     if (!this.input) { 
      throw 'There was no input found with id: "' + inputId + '"'; 
     } 

     // input defaults 
     this.input.value = this.color; 
     this.input.unselectable = 'on'; 
     this.css(this.input, { 
      backgroundColor: this.color, 
      borderWidth: '0.4em 0.3em', 
      width: '3em', 
      cursor: 'default' 
     }); 

     // register input event 
     this.input.onfocus = function() { 
      nativeColorPicker.onFocus(this.id); 
     }; 
     }, 

     // initialize once 
     start: function() { 
     // is already started 
     if (this.started) { 
      return; 
     } 

     // test if browser has native support for color input 
     try { this.hasNativeColorSupport = !!(document.createElement('input').type = 'color'); } catch (e) {}; 

     // no native support... 
     if (!this.hasNativeColorSupport) { 
      // create object element 
      var object_element = document.createElement('object'); 
      object_element.classid = 'clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b'; 
      // set attributes 
      object_element.id = 'colorHelperObj'; 
      this.css(object_element, { 
      width: '0', 
      height: '0' 
      }); 
      document.body.appendChild(object_element); 
     } 
     // mark as started 
     this.started = true; 
     }, 

     // destroys the plugin 
     destroy: function (inputId) { 
     var i; 
     // destroy one input or all the plugin if no input id 
     if (typeof inputId === 'string') { 
      this.off(this.inputs[inputId]); 
     } else { 
      // remove helper object 
      document.body.removeChild(document.getElementById('colorHelperObj')); 
      // remove input events and styles 
      for (i in this.inputs) { 
      this.off(this.inputs[i]); 
      } 
      // mark not started 
      this.started = false; 
     } 
     }, 

     off: function (input) { 
     input.onfocus = null; 
     this.css(input, { 
      backgroundColor: '', 
      borderWidth: '', 
      width: '', 
      cursor: '' 
     }); 
     }, 

     // input focus function 
     onFocus: function (inputId) { 
     this.input = this.inputs[inputId]; 
     this.color = this.getColor(); 
     this.input.value = this.color; 
     nativeColorPicker.css(this.input, { 
      backgroundColor: this.color, 
      color: this.color 
     }); 
     this.input.blur(); 
     }, 

     // gets the color from the object 
     // and normalize it 
     getColor: function() { 
     // get decimal color, (passing the previous one) 
     // and change to hex 
     var hex = colorHelperObj.ChooseColorDlg(this.color.replace(/#/, '')).toString(16); 

     // add extra zeroes if hex number is less than 6 digits 
     if (hex.length < 6) { 
      var tmpstr = '000000'.substring(0, 6 - hex.length); 
      hex = tmpstr.concat(hex); 
     } 

     return '#' + hex; 
     }, 

     // set css properties 
     css: function (el, props) { 
     for (var prop in props) { 
      el.style[prop] = props[prop]; 
     } 
     } 
    }; 

    // expose to global 
    window.nativeColorPicker = nativeColorPicker; 
}(window));

演示：denis.io

来源

2014-12-03 09:13:52

我知道这是一年前的事，但是有谁知道你是否可以使用这个解决方案，而不必拥有个人ID字段？我有一个页面上有20个... – zazvorniki 2015-04-10 15:46:25

试试这个：

<![if !IE]> 
    <input type="color" name="clr1" value=""/> 
<![endif]> 
<!--[if IE]> 
    <input type="text" name="clr1" value="" style="display:none"/> 
    <button onclick="var s = Dlg.ChooseColorDlg(clr1.value); window.event.srcElement.style.color = s; clr1.value = s">&#9608;&#9608;&#9608;&#9608;&#9608;</button> 
    <object id="Dlg" classid="CLSID:3050F819-98B5-11CF-BB82-00AA00BDCE0B" width="0" height="0"></object> 
<![endif]-->

来源

2016-04-18 17:18:03

请注意有IE11条件注释的问题https://stackoverflow.com/questions/19446584/why-doesnt-internet-explorer-11-honour-conditional-comments-even-when -emulating – 2017-05-23 02:28:42

如何获得拾色器在Internet Explorer

回答

相关问题