Question

当输入字段处于焦点时，我有很多代码将标签设置为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/

非常感谢任何指示： - ）

Answer 1

字段内标签代码中有一行代码表示......

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

将此更改为...

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

fadeOpacity:0.5至fadeOpacity:0.0

Answer 2

有一个名为placeholder的html属性可以做到这一点。但我不确定你可以对它应用淡入淡出效果。编辑：css过渡可能是这样的：Change an HTML5 input's placeholder color with CSS，但它相当可怕。

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

输入[name：fname]：active { 颜色：绿色 }

Answer 3

当您将插件应用于标签时，您可以通过传入一个选项对象来设置不透明度，如下所示：

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

Answer 4

的Javascript

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

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

});
   });

编辑淡入淡出效果

$(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-->

Answer 5

虽然每个插件开发人员都没有实现，但good practice提倡接受选项对象的插件。虽然不是非常清楚，但您可以覆盖fadeOpacity和fadeDuration选项。

要解决您的问题，只需传入一个指定fadeOpacity的options对象，如下所示：

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

在输入字段焦点上将标签设置为完全不透明度

5 个答案: