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

Set label to full opacity on input field focus

本文关键字：不透明度 焦点 字段 标签 设置 输入      更新时间：2023-09-26

我有很多代码，当输入字段聚焦时，可以将标签设置为0.5的不透明度。现在，如果可能的话，我想将其设置为0（100%不可见）。

有人能帮忙吗？

这是我的小提琴：http://jsfiddle.net/d8Apy/5/

我的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/

非常感谢任何指针：-）

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

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

将此更改为…

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

fadeOpacity:0.5至fadeOpacity:0.0

当你将插件应用到实验室时，你可以通过传递一个选项对象来设置不透明度，比如：

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

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

有一个名为placeholder的html属性可以做到这一点。然而，我不确定你是否可以对其应用淡入淡出效果。edit：这可能与css转换有关：更改HTML5输入'；s的占位符颜色，但它相当可怕。

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

input[名称：fname]：活动{颜色：绿色}

虽然不是每个插件开发人员都能实现，但良好的实践提倡插件接受选项对象。虽然不是很清楚，但您可以覆盖fadeCapacity和fadeDuration选项。

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

$(document).ready(function(){
    $('label').inFieldLabels({fadeOpacity: 0.0});
});
相关文章：