Question

尝试创建一个输入框执行以下操作：正常状态输入框文本为x，悬停状态输入文本为y，并且您将框保留为z并且可以再次保持z通过所有状态。

-update 有一个搜索框，背景图像和文字淡出，一旦你悬停它是生动的，一旦你对焦它，生动的2px边框，但一旦你离开它我松散的东西:(所以需要一个技巧让它保持生动的背景图片（其中有x和y，每个状态一个）和文本但松散2px边框

---UPDATE ---
/* Search box */
.searchbox {
    background: url(../images/search-grey.gif) no-repeat 6px -5px #f8f8f8;
    width:240px; 
    margin-right:4px; 
    margin-left:11px; 
    color:#cccccc;   
    vertical-align: top; 
    padding: 4px 2px 4px 79px;
    border-color: #4FA4F9;
}
.searchbox:hover {
    background: url(../images/search-greyb.gif) no-repeat 6px -5px #f8f8f8;
    color:#888888; 
}
.searchbox:focus {
    background: url(../images/search-greyb.gif) no-repeat 5px -6px #ffffff;
    width:239px; 
    color:#888888; 
    padding: 3px 2px 3px 78px;
}
.searchbox.blur {
    background: url(../images/search-greyb.gif) no-repeat 6px -5px #ffffff;
    width:239px; 
    color:#000000; 
    padding: 4px 2px 4px 79px;
}

@-moz-document url-prefix() {
    .searchbox {
    background: url(../images/search-grey.gif) no-repeat 6px -4px #f8f8f8;
    }
}
@-moz-document url-prefix() {
    .searchbox:hover {
    background: url(../images/search-greyb.gif) no-repeat 6px -4px #f8f8f8;
        }
}
@-moz-document url-prefix() {
    .searchbox:focus {
    background: url(../images/search-greyb.gif) no-repeat 5px -5px #f8f8f8;
    }
}

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}
input, select, textarea {
  margin: 1 0 0;
}
input, textarea, .date {
  border: 1px solid #aaa;
  border-radius: 3px;
  color:#333;
}
input {
  font-size: 13px;
  padding: 0px;
}
textarea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  padding: 4px 4px 4px 4px;
}

select:hover {border: 1px solid #4FA4F9;}
input:hover {border: 1px solid #4FA4F9;}
textarea:hover {border: 1px solid #4FA4F9;}
select:focus {padding: 0px;}
input:focus {padding: 0px;}
textarea:focus {padding: 3px 3px 3px 3px;

}

--- html ---

<input id="searchdomain" name='domain' type="text" style="font-size:15px;" class="searchbox"/>

--- ---- JS

/* Search Box Leave */
$(".searchbox").blur(function(){
    $(this).addClass("blur");
});

Answer 1

您可以通过设置类来使用jQuery来完成此操作。

$(".searchable").blur(function() {
    $(this).addClass("blur");
});

然后在你的CSS中你可以像这样设置颜色

.searchable.blur
{
  color:#000;   
}

这是一个jsfiddle示例 - ＆gt; http://jsfiddle.net/y46Wk/2/

请记住，除非您删除该类，否则该元素不会再次显示其悬停颜色。

Answer 2

这不是你问题的真正答案....但我感觉你在表单上做了一些验证，所以为什么不看一下像这样的jQuery验证插件 http://docs.jquery.com/Plugins/Validation

以下是其他与表单相关的jQuery内容的列表 http://speckyboy.com/2010/06/22/50-jquery-plugins-for-form-functionality-validation-security-and-customisation/

如果他们都没有帮助，也许你可以告诉我们哪一个接近给我们一些关于你想要什么的线索; - ）

Answer 3

您是否尝试这样做：http://jsfiddle.net/akhurshid/y46Wk/4/

Answer 4

您所描述的（维持状态）在技术上只需要CSS。

以下是解释该过程的an article。总之，您使用由焦点触发的过渡状态，以将样式应用于元素。我不是把它作为最好的方法提倡，但是看看你能用CSS3属性做些什么真的很有趣。

更多的好奇心而不是直接的答案，但希望它对你/其他人提出这个问题很有帮助:)）

点击或徘徊后你可以改变状态吗？

4 个答案: