在輸入字段焦點上將標籤設置爲完全不透明

當輸入字段處於焦點時，我有很多代碼將標籤設置爲0.5不透明度。現在，如果可能，我想將其設置爲0（100％隱身）。在輸入字段焦點上將標籤設置爲完全不透明

有人可以幫忙嗎？

我HTML：

<div class="fieldgroup"> 
    <label for="name">Name</label> 
    <input type="text" id="name" name="name"> 
</div><!--/.fieldgroup-->

我CSS：

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    font-family: Arial; 
} 
.fieldgroup { 
    position: relative; 
} 
input[type='text'], 
label { 
    padding: 5px; 
    font-size: 16px; 
    line-height: 16px; 
    margin: 0; 
    height: 30px; 
    color: #fff; 
    display: block; 
} 
input[type='text'] { 
    border: none; 
    background: green; 
}

我使用這個jQuery插件：http://fuelyourcoding.com/in-field-labels/

非常感謝:-)

來源

2013-07-19 michaelmcgurk

你已經知道這樣做有什麼problem.It需要1個字符編輯做到這一點。 – Musa

此外，你可能想打那個jsFiddle上的「TidyUp」按鈕，所以它實際上是可讀的。 – Schmalzy

當您應用插件到你的標貼，你可以通過傳遞一個選項設置不透明度的對象，像這樣：

$("label").inFieldLabels({ fadeOpacity:0.0 });

來源

2013-07-19 16:04:10 Splendiferous

任何指針有代碼的內場的標籤代碼，上面寫着一行...

$.InFieldLabels.defaultOptions={fadeOpacity:0.5,fadeDuration:300,labelClass:'infield'};

更改爲...

$.InFieldLabels.defaultOptions={fadeOpacity:0.0,fadeDuration:300,labelClass:'infield'};

fadeOpacity:0.5到fadeOpacity:0.0

來源

2013-07-19 16:00:41 Schmalzy

有，做那個叫placeholder的HTML屬性。但我不確定您是否可以對其應用淡入淡出效果。編輯：它可能與CSS轉換和這個：Change an HTML5 input's placeholder color with CSS，但它是相當可怕的。

<input type="text" name="fname" placeholder="First name">

輸入[名稱：FNAME]：積極{ 顏色：綠色 }

來源

2013-07-19 16:01:56 sabof

的Javascript

$(document).ready(function() { 
$("#name").focus(function(){ 

$('#lblname').css({'opacity':'0'}); 

}); 
    });

編輯褪色EFFE克拉

$(document).ready(function() { 
$("#name").focus(function(){ 

$("#lblname").animate({ 'opacity':'0'},350); 

}); 
    });

HTML

<div class="fieldgroup"> 
<label for="name" id="lblname">Name</label> 
<input type="text" id="name" name="name"> 
</div><!--/.fieldgroup-->

來源

2013-07-19 16:06:59

儘管不受每個插件開發者實現，good practice主張插件受理選項對象。儘管不太清楚，但您可以覆蓋fadeOpacity和fadeDuration選項。

爲了解決您的問題，簡單地傳遞一個選擇對象，指定fadeOpacity像這樣：

$(document).ready(function(){ 
    $('label').inFieldLabels({fadeOpacity: 0.0}); 
});

來源

2013-07-19 16:29:16 stavarotti

在輸入字段焦點上將標籤設置爲完全不透明

回答

相關問題