使用onClick禁用文本字段时更改文本的颜色？

Question

我想在这里做的是，当我们单击按钮时，应更改文本字段的默认值颜色。 我的代码适用于除IE之外的所有浏览器。 如何克服IE中的这个问题。 如何做下拉列表。

<html>
<head>
 <title> Change color for text when it is Disabled </title>
 <meta name="Generator" content="EditPlus">
         <script type="text/javascript">
      <!--
/*function changeColor(){
    document.getElementById('button_1').style.color='red';
}*/
function changeColor(){
    document.getElementById('color').removeAttribute('disabled');
    document.getElementById('color').style.color='red';
    document.getElementById('color').setAttribute('readOnly','readOnly');
}
      //-->
  </script>
   </head>

  <body>
      <input type="text"  value='Hi Conrep' disabled id='color'><br />
        <select id='color' disabled>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
   </select><br />
     <select>
     <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
   </select> 
   <input type='button' value="Change Color" onclick ='changeColor();'>
  </body>
    </html>

Answer 1

对于跨浏览器，您需要使用readonly属性而不是禁用属性。

例

<style type="text/css">
.redColor
{
    color:red;
}
</style>
<script type="text/javascript">
<!--
function changeColor()
{
    var el = document.getElementById('button_1');
    el.className = "redColor";
}
//-->
</script>
<input type="text"  value='Hi Conrep' readonly id='button_1'>
<input type='button' value="Change Color" onClick ='changeColor();'>

Answer 2

这是因为IE不允许您修改disabled控件。 它将始终以这种方式呈现它们

在您的代码中尝试以下操作：

<style>
  .IEFormat
  {
      color:Red;
      background-color:#CCCCCC;
      border:1px Solid #BBBBBB;
  }
  .Format
  {
      color:Red;
  }
</style>
<script type="text/javascript">
  navigator.sayswho= (function(){
    var N= navigator.appName, ua= navigator.userAgent, tem;
    var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
           if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
             M= M? [M[1], M[2]]: [N, navigator.appVersion,'-?'];
          return M;
  })();
  function changeColor(){    
      var elem = document.getElementById('button_1');
      if(navigator.sayswho.toString().indexOf("IE")>0)
      {
         if(elem.getAttribute('disabled'))
            elem.removeAttribute('disabled');
         elem.className="IEFormat";
         elem.setAttribute('readOnly','readOnly');
      }     
      else
         elem.className='Format';
}
</script>

因此，基本上，您正在执行的工作是，检测浏览器，为所有其他浏览器运行当前版本，并为IE运行其他版本。

您可以通过样式使IE中的只读文本框被禁用。 :)

使用onClick禁用文本字段时更改文本的颜色？

问题描述

2 个解决方案

解决方案1
1 2013-03-12 07:52:34

解决方案2
0 2013-03-12 07:57:20

使用onClick禁用文本字段时更改文本的颜色？

问题描述

2 个解决方案

解决方案1 1 2013-03-12 07:52:34

解决方案2 0 2013-03-12 07:57:20

解决方案1
1 2013-03-12 07:52:34

解决方案2
0 2013-03-12 07:57:20