Heim > Web-Frontend > js-Tutorial > Methode zum Übertragen von Werten zwischen dem Fokus der JavaScript-Komponente und den Javascript-Fähigkeiten des In-Page-Ankerpunkts

Methode zum Übertragen von Werten zwischen dem Fokus der JavaScript-Komponente und den Javascript-Fähigkeiten des In-Page-Ankerpunkts

WBOY
Freigeben: 2016-05-16 16:16:25
Original
1500 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Methode zum Übertragen von Werten zwischen dem Fokus einer JavaScript-Komponente und dem Ankerpunkt auf der Seite. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Die beiden oben genannten kleinen Funktionen sind auf einigen neuen Mobiltelefonseiten sehr nützlich.

Wie löst man ein Ereignis aus, wenn der Cursor im Eingabefeld platziert wird, und ein anderes Ereignis, wenn man das Eingabefeld verlässt? Auch wenn der Benutzer nichts eingibt…

Es ist sehr einfach, Werte zwischen Seiten zu übertragen, aber wie überträgt man Werte zwischen Ankerpunkten innerhalb der Seite?

1. Grundlegende Ziele

Es gibt eine Seite mit einem Eingabefeld und einem Hyperlink. Diese beiden Dinge stehen in keinem Zusammenhang,

Nur ​​weil die Funktion nicht groß ist, habe ich die beiden Funktionen kombiniert, um sie zu schreiben

1. Eingabefeldfunktion

Sobald der Cursor auf dem Hintergrund des Dialogfelds platziert wird, wird er rot, und sobald der Benutzer mit der Maus an eine andere Stelle klickt, wechselt er wieder zu einem grauen Hintergrund

2. Hyperlink-Funktion

Übergeben Sie den Wert text=1 über die get-Methode an den unteren Ankerpunkt am unteren Rand der Seite. Unter dem unteren Ankerpunkt befindet sich ein deaktiviertes Eingabefeld, das weiterhin den Textparameter in der Adressleiste abfragt

Wenn Sie nicht am Anfang klicken, gibt es keinen Textparameter, sodass das Eingabefeld immer als Null angezeigt wird

Sobald auf den Hyperlink geklickt wird, ändert sich das folgende Dialogfeld nach 0,5 Sekunden auf 1. Da es auf Millisekundenebene verarbeitet wird, wird die Wahrnehmung des Benutzers in Echtzeit verarbeitet,

Über dem deaktivierten Hyperlink befindet sich ein Zurück-Hyperlink, der die Parameterübertragung der Seite löscht. Wenn Sie die Bildlaufleiste erneut nach unten ziehen, wird sie wieder als Null angezeigt.

Bitte beachten Sie, dass bei erfolgreicher Übertragung von Werten zwischen Ankerpunkten innerhalb der Seite die URL des Browsers lautet:

2. Produktionsprozess

Es ist nicht erforderlich, irgendwelche Plug-Ins einzuführen. Öffnen Sie einfach eine HTML-Seite, um zu schreiben. Bitte sehen Sie sich den folgenden Code an:

Code kopieren Der Code lautet wie folgt:
🎜> onfoucs


  • < ;/li>
  • < ;li>
  • < /li>

    back



    <script> /*Ändere die Hintergrundfarbe der Seite in #eeeeee*/ <br> window.onload=function(){ <br> Document.bgColor="#eeeeee"; Polling(); <br>                                                                                                                  <br> /*Wenn das Dialogfeld den Fokus erhält, ändern Sie die Hintergrundfarbe in Rot, andernfalls ändern Sie sie wieder in #eeeeee*/ <br> Funktion getFocus(){ <br>          document.bgColor="#ff0000" <br> }  <br>        <br> Funktion loseFocus(){ <br> Document.bgColor="#eeeeee"; }  <br>        <br> /*Dies ist ein spezieller regulärer Ausdruck zum Übernehmen der Parameter, wenn URL get den Wert übergibt*/ <br> Funktion getUrlParam(name) { <br>            var reg = new RegExp("(^|&)" name "=([^&]*)(&|$)");                                   var r = window.location.search.substr(1).match(reg); If (r!=null) return unescape(r[2]); return null; }  <br>        <br> /*Ständig abfragen, um zu überprüfen, ob Get-Parameter übergeben wurden*/ <br> Funktion synchronous() { <br>          document.getElementById("pollingtext").value =getUrlParam("text"); }  <br>        <br> Funktion Polling(){ <br>                 synchronous();                     ​ ​ ​ setInterval("synchronous()", 500);   <br> }  <br> </script>


    Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.
  • Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    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
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage