blur focus

focus() / blur()

<pre><b>聚焦：element.focus()獲得焦點 element.blur()失去焦點 </b> <<c>input type="type" value="⇦ blur" onmouseout = "this.blur(); this.value= '⇦ blur'" onmouseover = "this.focus();this.value= '⇦ focus'" /> <<c>style> input:focus {background-color: yellow } input {background-color: lime } <<c>/style> </pre> <input type="type" value="⇦ blur" onmouseout="this.blur();this.value='⇦ blur'" onmouseover="this.focus();this.value='⇦ focus'" /> <style> input:focus {background-color: yellow} input {background-color: lime } pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

預覽 寫程式 還原 LLLLLLLLLLLLLLLLL

<b>jquery focus()</b> <pre> <<c>input type="type" value="⇦ blur" /> <<c>script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"><<c>/script> <<c>script> $(document).ready(function(){ $("input").mouseover(function(){ $("input").focus(); $("input").val("focus"); }); $("input").mouseout(function() { $("input").blur(); $("input").val("blur"); }); }); <<c>/script> </pre> <input type="type" value="⇦ blur" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("input").mouseover(function(){ $("input").focus(); $("input").val("focus"); }); $("input").mouseout(function() { $("input").blur(); $("input").val("blur"); }); }); </script> <style> input:focus {background-color: yellow } input {background-color: lime } </style> <style> b{font-size:30px;color:blue;} #www{font-size: 30px ;word-wrap:break-word;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } </style>

預覽 寫程式 還原 LLLLLLLLLLLLLLLLL

Edit

#html #網頁格式 #style #div #script focus() #script blur() #script 獲得焦點 #script 失去焦點