ホームページ >ウェブフロントエンド >htmlチュートリアル >[ヘルプ] メッセージへのゴージャスなエフェクトの実装interface_html/css_WEB-ITnose
[ヘルプ] メッセージへのゴージャスなエフェクトの実装interface_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:16:131070ブラウズ
事例を挙げてみましょう: http://www.ruiec.com/message/
これが、彼がこのページでメッセージの効果を達成した方法です。
1/マウスをクリックすると枠線が光ります
2/枠内のテキストは入力後自動的に消えます。
これら2つの効果を達成する方法!
ディスカッションへの返信（解決策）
これは非常に単純な、obj.focus() のような js イベントです ｛｝
境界線の照明効果は CSS3 の疑似クラスを使用して実現できます。それ
2 番目の個人用 JQuery:
$("#input_text").bind("click",function()
{
$(this).val("");
});//
できる効果がわかりません。互換性がありません。
onkeydown のときに、元のコンテンツが「」になると、テキストが消えます。まず、テキスト ボックスの内容が元のプリセット内容であるかどうかを確認し、そうでない場合は、処理しないでください。
第 1 章は疑似クラスで実装され、2 番目のコードは次のとおりです
<!DOCTYPE html> <head> <style> </style> <script> function cleartext() { var inputtext=document.getElementById("inputtext"); if(inputtext.value=="请输入姓名") { inputtext.value=""; inputtext.style.color="black"; } } </script> <body><body><input type="text" id="inputtext" style="font-weight:100; color:#999999; border:1px solid black" value="请输入姓名" onFocus="cleartext();"/><input type="text" /></body> </body></html>
<style type="text/css"> .input_on{ width:185px;padding:4px 8px 0pt 3px;height:20px;border:1px solid #999;background-color:#FFFFCC;} .input_out{width:185px;padding:4px 8px 0pt 3px;height:20px;border:1px solid #CCC;background-color:#FFF;} </style><input type="text" value="" onfocus="$(this).removeClass('input_out');$(this).addClass('input_on');" onblur="$(this).removeClass('input_on');$(this).addClass('input_out');" onmousemove="$(this).removeClass('input_out');$(this).addClass('input_on');" onmouseout="$(this).removeClass('input_on');$(this).addClass('input_out');" /> さらに LZ の onfocus イベント
ls' onfocusイベント 入力が間違っています
2 つ目は、input 属性プレースホルダーです
2 つ目は HMLT5 の機能です声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。