Inputコンテンツ変更および透明度プラグイン
多くのサイトの検索入力ボックスに「検索」が表示されます.のこのようなテキストは、マウスに移動するとクリアされ、入力されます.
ここでは,この機能を実現するコードをプラグイン形式に書く.コードは次のとおりです.
demo.html:
ここでは,この機能を実現するコードをプラグイン形式に書く.コードは次のとおりです.
(function($){
$.fn.myInput=function(opts){
var setting=$.extend({
opacity:0.5,
content:"Search.."
},opts||{});
if($(this).val()!=setting.content){
//alert("input ， 'Search..'");
$(this).val(setting.content);
}
$(this).css("opacity",setting.opacity);
$(this).focus(function(){
// $(this).css("border","none");
$(this).css("opacity",1);
if($(this).val()==""||$(this).val()==setting.content){
$(this).val("");
}
});
$(this).focusout(function(){
if($(this).val()==""){
$(this).val(setting.content);
$(this).css("opacity",setting.opacity);
}
});
}
})(jQuery);demo.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="C:\Users\Administrator\Desktop\jquery-1.9.0.js"></script>
<script type="text/javascript" src="jquery.cms.common.js"></script>
</head>
<script type="text/javascript">
$(function(){
$("#ip1").myInput();
$("#ip2").myInput({content:" "});
$("#ip3").myInput({opacity:"0.1",content:" "});
})
</script>
<body>
<input type="text" id="ip1" value="Search.."/>
<input type="text" id="ip2" value=" "/>
<input type="text" id="ip3" value=""/>
</body>
</html>