【问题标题】:Change textbox text color with javascript使用javascript更改文本框文本颜色
【发布时间】:2015-10-23 16:22:38
【问题描述】:

我有一个文本框。当我单击它时,我想用 javsacript 更改文本颜色样式。在此之前,我成功完成了这个。当有人单击文本框时,文本框在模糊文本框变为旧版本时清除内部。此代码现在适用于我

<input id="kullanici_adi_text" type="text" name="kullanici_adi_text"    value="Kullanıcı İsmini Giriniz..." onfocus="if(this.value=='Kullanıcı İsmini Giriniz...') {this.value='';}  onblur="if(this.value==''){this.value='Kullanıcı İsmini Giriniz...'}"/> 

但是当有人关注这个时,我也想更改文本颜色和文本框边框大小。代码不起作用

<input id="kullanici_adi_text" type="text" name="kullanici_adi_text" value="Kullanıcı İsmini Giriniz..." onfocus="if(this.value=='Kullanıcı İsmini Giriniz...') {this.value=''; document.getElementById('kullanici_adi_text').style.color = 'blue';}"  onblur="if(this.value==''){this.value='Kullanıcı İsmini Giriniz...'; document.getElementById('kullanici_adi_text').style.color = #fff; }"/> 

【问题讨论】:

  • 您的十六进制代码颜色周围似乎缺少引号。你有这个:document.getElementById('kullanici_adi_text').style.color = #fff; 但它应该是这样的:document.getElementById('kullanici_adi_text').style.color = '#fff';
  • @AndyHenderson 无论如何都不工作

标签: javascript html css textbox


【解决方案1】:

您应该使用颜色配额:

<input id="kullanici_adi_text" type="text"
   name="kullanici_adi_text"
   value="Kullanıcı İsmini Giriniz..." 
onfocus="if(this.value=='Kullanıcı İsmini Giriniz...')
    {this.value='';
     this.style.color = 'blue';}"  
onblur="if(this.value=='')
    {this.value='Kullanıcı İsmini Giriniz...';
     this.style.color = '#ff0000';}"/>

作为建议 - 最好将 javascript 代码与标记分开。

【讨论】:

  • 我怎样才能给 rgba 它不起作用 => this.style.color='rgba(69,69,69,0.3)';
  • 请检查小提琴 - jsfiddle.net/4humesk7/1 - 这对我来说就像一个魅力。
【解决方案2】:

1.在您的文档中包含 jQuery 库。

2.包含这个脚本:

$(document).ready(function(){
   $('#kullanici_adi_text').focus(function(){
       $(this).css('color', 'red');
   }).focusout(function(){
       $(this).css('color', 'black');
   });
});

【讨论】:

    【解决方案3】:

    这可行
    &lt;input id="kullanici_adi_text" type="text" onfocus="myFunction()"&gt;

    <script>
    function myFunction() {
    document.getElementById("kullanici_adi_text").style.color = "#ff0000";
    document.getElementById("kullanici_adi_text").style.color = "magenta";
    document.getElementById("kullanici_adi_text").style.color = "blue";
    document.getElementById("kullanici_adi_text").style.color = "lightblue";
    }
    </script>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-10-01
      • 2011-02-19
      • 2010-10-30
      • 1970-01-01
      • 2016-11-20
      • 1970-01-01
      相关资源
      最近更新 更多