suchen

Heim >Web-Frontend >H5-Tutorial >Einführung in die Verwendung von HTML5-Autofokus-Attributen_HTML5-Tutorialfähigkeiten

Einführung in die Verwendung von HTML5-Autofokus-Attributen_HTML5-Tutorialfähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:49:102901Durchsuche

Originaltext: HTML5-Autofokus-Attribut
Ursprüngliche Veröffentlichungszeit: 27. August 2012
Übersetzungszeitpunkt: 6. August 2013
HTML5 hat viele wunderbare Funktionen eingeführt. Etwas für uns .
In der Vergangenheit mussten wir JavaScript und Flash verwenden, um Aufgaben wie Formularvalidierung, Eingabeaufforderungen zum Leeren von Eingabefeldern (INPUT-Platzhalter) und clientseitiges Hoch- und Herunterladen von Dateien (clientseitige Datei) zu erledigen Benennung) sowie die Audio-/Videowiedergabe können jetzt mit einfachem HTML durchgeführt werden. Mit einer weiteren einfachen HTML-Funktion können wir nun über ein Attribut namens „Autofokus“ den Eingabefokus automatisch auf das gewünschte Element setzen, nachdem die Seite vollständig geladen wurde.
Der Code ist so einfach wie:

Kopieren Sie den Code
Der Code lautet wie folgt:

button>
Seite wird geladen. (Das heißt, ich habe andere Elemente (z. B. h1-Tags) ausprobiert,
tabIndex
=0, aber das Autofokus-Attribut hat überhaupt keine Auswirkung auf diese Elemente.
Dieses Attribut ist auf Seiten nützlich, deren Hauptzweck das Sammeln von Informationen ist, wie zum Beispiel die Google-Startseite (in 99 % der Fälle wird sie für die Suche verwendet) oder Online-Installationsassistenten (wie das WordPress-Installationsprogramm). Und das Wichtigste ist - Es ist kein JavaScript erforderlich.
Der vollständige Seitencode lautet wie folgt:



Kopieren Sie den Code
Der Code lautet wie folgt:
HTML5-Autofokus> Generator" content=" EditPlus"> </div><meta name="Author" content="renfufei@qq.com"> <div class="msgborder" id="phpcode11"><meta name="Description" content="original=http:/ /davidwalsh.name/ autofocus"> <br></head> <br><body> <br><!-- Grundsätzlich kann nur eines der folgenden drei Elemente das Autofokus-Attribut festlegen. Wenn mehrere Elemente haben es eingestellt. Es sollte das letzte Element sein, das den Fokus erhält. <br /><!-- <br /><div> " /> <br><button autofocus="autofocus">Hallo!</button> <br><textarea autofocus="autofocus"></textarea> <br></div> <br></ body> <br></html></div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Automatischer Fokus und Platzhaltertext-Beispielcode für HTML5-Registrierungsformular_HTML5-Tutorial-Fähigkeiten" href="https://m.php.cn/de/faq/6258.html">Automatischer Fokus und Platzhaltertext-Beispielcode für HTML5-Registrierungsformular_HTML5-Tutorial-Fähigkeiten</a></span><span>Nächster Artikel：<a class="dBlack" title="Automatischer Fokus und Platzhaltertext-Beispielcode für HTML5-Registrierungsformular_HTML5-Tutorial-Fähigkeiten" href="https://m.php.cn/de/faq/6260.html">Automatischer Fokus und Platzhaltertext-Beispielcode für HTML5-Registrierungsformular_HTML5-Tutorial-Fähigkeiten</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/de/faq/348281.html" title="Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite" class="aBlack">Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348372.html" title="Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)" class="aBlack">Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348373.html" title="Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9" class="aBlack">Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348374.html" title="Reguläre Ausdrücke und neue HTML5-Elemente" class="aBlack">Reguläre Ausdrücke und neue HTML5-Elemente</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348469.html" title="So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen" class="aBlack">So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>