How to get Color Picker in Internet Explorer

javascript html css internet-explorer

11,819

Solution 1

Try this:

<![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]-->

Solution 2

Try this :

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 and jquery.drawrpalette-min.js

FILES : https://drive.google.com/drive/folders/1pcfPEVmgz6UG8M1mAI8blFyPAsvKBzgi?usp=sharing

Demo : https://qvgukvb6oklnucssvrtcvq-on.drv.tw/public/colorpicker/

Source : https://www.jqueryscript.net

Solution 3

You can try Native Color Picker Polyfill for the HTML5's "color" input type on Internet Explorer. See : nativeColorPicker

HTML Code

<!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 code **

(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));

Demo : denis.io

11,819

Author by

Admin

Updated on June 28, 2022

Comments

Admin almost 2 years
How to get color picker in IE11 I am getting just text box in ie11 when I type
```
<input type="color" name="clr1" value=""/>
```
The above code is working fine in chrome but in IE it is shwoing just textbox.