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

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

javascript html css internet-explorer

Javascript 如何在Internet Explorer中获取颜色选择器,javascript,html,css,internet-explorer,Javascript,Html,Css,Internet Explorer,如何在IE11中获取颜色选择器当我打字时，ie11中只有一个文本框 <input type="color" name="clr1" value=""/> 上述代码在chrome中运行良好，但在IE中只显示文本框。您可以在Internet Explorer上尝试HTML5“颜色”输入类型的本机颜色选择器Polyfill。见： HTML代码 <!doctype html> <title>Demo - Native Color Picker</titl

如何在IE11中获取颜色选择器当我打字时，ie11中只有一个文本框

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

上述代码在chrome中运行良好，但在IE中只显示文本框。

您可以在Internet Explorer上尝试HTML5“颜色”输入类型的本机颜色选择器Polyfill。见：

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>


演示-本机颜色选择器
正文{字体系列：verdana；背景色：#ebebeb；填充：30px}h1{字体系列：'Trebuchet MS'；字体重量：700；字体大小：30px；页边距底部：20px}内容{背景色：#fff；边框：3px实心#ccc；填充：20px}p{页边距：20px 0}输入{位置：相对；顶部：10px}标签{光标；字体大小：14px}
本色选择器

选择一种颜色：
获得价值


选择其他颜色：
获得价值

（功能（）{
//初始化插件
nativeColorPicker.init（'color'）；
init（'color2'）；
//演示按钮..继续
var$=function（id）{return document.getElementById（id）}，alertColor=function（）{alert（$（this.id.split（“”“）[1]）.value）；
$（'btn_color'）。onclick=alertColor；
$（'btn_color2'）。onclick=alertColor；
}());

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

（功能（窗口）{
var document=window.document，
nativeColorPicker={
//初始化标志
开始：错，
//起始颜色
颜色：'#000000'，
//插件初始化的输入
输入：{}，
//用于知道是否支持颜色输入的标志
HasNativeColor支持：false，
//初始化指定输入上的插件
init：函数（inputId）{
//启动插件
这个。start（）；
如果（此.hasnativeColor支持）{
返回；
}
if（输入的类型！=='string'）{
抛出'inputId必须是字符串id选择器'；
}
//设置输入
this.input=（this.inputs[inputId]=this.inputs[inputId]）| | document.getElementById（inputId）；
如果（！this.input）{
throw“未找到id为“+inputId+”的输入”；
}
//输入默认值
this.input.value=this.color；
this.input.unselectable='on'；
this.css（this.input{
背景颜色：这个颜色，
边框宽度：“0.4em 0.3em”，
宽度：“3em”，
光标：“默认值”
});
//寄存器输入事件
this.input.onfocus=函数（）{
nativeColorPicker.onFocus（this.id）；
};
},
//初始化一次
开始：函数（）{
//已经开始了
如果（此.started）{
返回；
}
//测试浏览器是否具有对颜色输入的本机支持
尝试{this.hasNativeColorSupport=！！（document.createElement（'input'）。type='color'）；}catch（e）{}；
//没有本地支持。。。
如果（！this.hasnativeColor支持）{
//创建对象元素
var object_element=document.createElement（'object'）；
object_element.classid='clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b'；
//设置属性
object_element.id='colorHelperObj'；
这个.css（object_元素{
宽度：“0”，
高度：“0”
});
document.body.appendChild（object\u元素）；
}
//标记为开始
this.started=true；
},
//破坏插件
销毁：函数（inputId）{
var i；
//如果没有输入id，则销毁一个输入或所有插件
如果（输入的类型=='string'）{
this.off（this.input[inputId]）；
}否则{
//删除辅助对象
document.body.removeChild（document.getElementById（'colorHelperObj'）；
//删除输入事件和样式
对于（本.输入中的i）{
this.off（this.inputs[i]）；
}
//标记未启动
this.start=false；
}
},
关闭：功能（输入）{
input.onfocus=null；
这个.css（输入{
背景颜色：''，
边框宽度：“”，
宽度：“”，
光标：“”
});
},
//输入焦点函数
onFocus：函数（inputId）{
this.input=this.input[inputId]；
this.color=this.getColor（）；
this.input.value=this.color；
nativeColorPicker.css（this.input{
背景颜色：这个颜色，
颜色：这个
});
this.input.blur（）；
},
//从对象获取颜色
//并使之正常化
getColor:函数（）{
//获取十进制颜色（传递上一个）
//然后换成十六进制
var hex=colorHelperObj.ChooseColorDlg（this.color.replace（/#/，''）.toString（16）；
//如果十六进制数小于6位，则添加额外的零
如果（十六进制长度<6）{
var tmpstr='000000'。子字符串（0，6-十六进制长度）；
十六进制=tmpstr.concat（十六进制）；
}
返回“#”+十六进制；
},
//设置css属性
css：功能（el、道具）{
用于（道具中的var道具）{
el.风格[道具]=道具[道具]；
}
}
};
//暴露于全球
window.nativeColorPicker=nativeColorPicker；
}（窗口）；

演示：

试试这个：

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

试试这个：

HTML:


$（函数（）{
$（“paletacolor”）.drawrpalette（）
});

选中此选项，您可以使用颜色选择器-JQUERY插件进行同样的操作。这里是链接：是的，我希望微软能插入他们的颜色选择器windows通用控件…检查这里，看看每个浏览器的细节支持。我知道这是一年多以前的事了，但是有人知道你是否可以使用这个解决方案而不必在字段上有个人id吗？我一页上有20条……注意IE11中有条件评论的问题