javascript - 使用 onClick 禁用文本字段时更改文本颜色?

标签 javascript html

这里我想做的是当我们点击按钮时,文本字段的默认值颜色应该被改变。我的代码适用于除 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>

最佳答案

对于跨浏览器,您需要使用 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();'>

关于javascript - 使用 onClick 禁用文本字段时更改文本颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15355811/

相关文章:

javascript - 通过 AngularJS 发出 POST 请求后尝试从 Node JS 渲染页面

php - 如果数据库发生错误,如何将页面重定向到其他页面

html - 如何为填充剩余垂直空间的 DIV 设置自动滚动条?

css - 将窗口调整为较小时,绝对位于右侧的 div 会超过左侧 div

jquery - 如何限制 HTML5 输入类型 ="number"的用户输入字符长度?

javascript - 使用 Rails/jQuery 的可点击表格行 - 无法正常工作的行内链接

javascript - 带有可选参数的组合框渲染

javascript - CSS:交叉淡入淡出动画?

javascript - 如何使用 mobile safari 停止在 touchend 上滚动?

javascript - 如何检测 div 的内容何时被卸载?