logo标签列表

如何在Internet Explorer中获取颜色选择器

javascripthtmlcssinternet-explorer
3
如何在IE11中获取颜色选择器 当我输入时，在ie11中只会得到文本框
<input type="color" name="clr1" value=""/>

以上代码在Chrome中运行良好，但在IE中只显示文本框。
请查看此链接：https://dev59.com/WGcs5IYBdhLWcg3w84dp#12456164 - Dipali Vasani
1
http://caniuse.com/#feat=input-color - Andreas
你可以使用COLOR PICKER - JQUERY PLUGIN来完成。这是链接：http://www.eyecon.ro/colorpicker/#about - Dipali Vasani
是啊，我希望微软能够插入他们的颜色选择器窗口公共控件... - dandavis
在这里检查并查看每个浏览器的详细支持情况。http://caniuse.com/#search=input%20type - ULLAS MOHAN.V
可能是HTML5输入类型日期、颜色、范围在Firefox和Internet Explorer中的支持的重复问题。 - trejder
3个回答
2

试试这个：

<![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]-->
请注意，IE11中存在有关条件注释的问题。https://dev59.com/WmIk5IYBdhLWcg3wPcGB - Matthew Lock
1
你可以尝试在Internet Explorer上使用原生颜色选择器Polyfill来实现HTML5的“color”输入类型。参见：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

我知道这是一年多以前的事了，但有没有人知道如果在字段上不需要单独的ID，是否可以使用此解决方案？我在页面上有大约20个... - zazvorniki
1
尝试一下：

这是HTML：

<!--Colorpicker -->
<input class="paletacolor" type="text" id="paletacolor" value="#f1040f"/>
<!--about Colorpicker js -->
<script src="jquery-3.4.1.slim.min.js"></script>
<script src="jquery.drawrpalette-min.js" defer></script>
<script>
  $(function(){
    $("#paletacolor").drawrpalette()
  });
</script>

jquery.drawrpalette-min.js 和 jquery.drawrpalette-min.js

文件：https://drive.google.com/drive/folders/1pcfPEVmgz6UG8M1mAI8blFyPAsvKBzgi?usp=sharing

演示：https://qvgukvb6oklnucssvrtcvq-on.drv.tw/public/colorpicker/

源码：https://www.jqueryscript.net

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接