Javascript onclick sendet keinen Wert während der Fokus der Texteingabe

Wenn ein Benutzer nach der Eingabe von Straßendaten auf die Schaltfläche Speichern als nächste Aktion klickt, fängt die Aktion onblur den onclick ab und löst das Speichern nicht aus. Wenn Sie jedoch etwas Padding hinzufügen (30px) und auf das Wort "Speichern" klicken, funktioniert das Wort, aber unter dem Wort "Speichern" funktioniert das nicht, genauso wie bei keinem Padding. Ich bin mir sicher, dass Benutzer direkt von der Eingabe von Text in das Eingabefeld gehen und dann auf Speichern klicken, was fehlschlägt, wenn sie nicht zuerst irgendwo anders klicken und dann auf Speichern klicken. Ich habe HTML und Javascript Beispiel unten zur Verfügung gestellt. Gibt es eine Möglichkeit, JavaScript zu verwenden, um dieses Problem zu lösen?Javascript onclick sendet keinen Wert während der Fokus der Texteingabe

<html> 
<script> 
function showstreet() { 
    var x = document.getElementById('street').value; 
    alert(x); 
} 
function focused() { 
    document.getElementById('title').style.display=''; 
    document.getElementById('street').value=''; 
} 
function blured() { 
    document.getElementById('title').style.display='none'; 
    if (document.getElementById('street').value == '') { 
     document.getElementById('street').value='street'; 
    } 
} 
</script> 
<style> 
.pad5 { padding:5px; } 
.pad30 { padding:30px; } 
</style> 
<body> 
<div id="title" class="pad5" style="display:none;">STREET NAME</div> 
<div> 
    <input id="street" type="text" name="street" value="street" class="pad5" 
    onfocus="focused()" onblur="blured()"> 
</div> 
<br> 
<div> 
    <input type="button" value="Save" class="pad30" onclick="showstreet()"> 
</div> 
</body> 
</html>

I umgewandelt, dies zu jsfiddle aber ich mache etwas nicht richtig (Neuling) https://jsfiddle.net/eyo63mav/26/

Quelle

2016-06-04 Airman

https://jsfiddle.net/eyo63mav/30/ überprüfen Sie diese – navnit

Danke @navnit. Ihr Link spiegelt das Problem wider. – Airman

@navnit Ihre JSfiddle zeigt das Problem, aber nicht gelöst. Sieht so aus, als wäre onMouseDown statt onClick meine Antwort. – Airman

Verwendung onMouseDown statt onClick in Ihrer Taste speichern. Dann wird onMouseDown vor onBlur abgefeuert werden unter

Quelle

2016-06-04 04:11:06 TRiNE

Wenn ich mich auf das Straßenfeld konzentriere und "123" eintippe, dann klicke direkt unter dem Wort "Speichern", es macht immer noch dasselbe (keine Warnmeldung). Aber über dem Wort "Speichern" und der Alarm zeigt "123". Ich hoffe immer noch auf eine reine JavaScript-Lösung, wenn möglich. – Airman

@Airman verwenden Breite Höhe statt Polsterung. Ich habe Code bearbeitet. – TRiNE

@Airman. Ich habe das Problem jetzt erkannt. – TRiNE

arbeitet Code

function showstreet() { 
 
    var x = document.getElementById('street').value; 
 
    alert(x); 
 
} 
 

 
function focused() { 
 
    document.getElementById('title').style.display = ''; 
 
    document.getElementById('street').value = ''; 
 
} 
 

 
function blured() { 
 
    document.getElementById('title').style.display = 'none'; 
 
    if (document.getElementById('street').value == '') { 
 
    document.getElementById('street').value = 'street'; 
 
    } 
 
}

<div id="title" class="pad5" style="display:none;">STREET NAME</div> 
 
<div> 
 
    <input id="street" type="text" value="street" class="pad5" onfocus="focused()" onblur="blured()"> 
 
</div> 
 
<br> 
 
<div> 
 
    <input type="button" value="Save" class="pad30" onclick="showstreet()"> 
 
</div>

Quelle

2016-06-04 04:37:23 navnit

HINWEIS: Klicken Sie auf Speichern, während Sie sich im Straßenfeld befinden, und "STREET NAME" wird angezeigt. Der OnClick-Aufruf von showstreet schlägt immer noch fehl, bis Sie sich nicht auf die Straße konzentrieren. – Airman

ok ich habe das. Ich versuche, Ihre Lösungen zu finden. – navnit

versuchen, onfoucusout Javascript-Funktion auf Textfeld – navnit

Styling selten einen Unterschied mit Ereignissen macht - jetzt, während die eine pauschale Aussage ist und in vielen Fällen, die wir finde heraus, dass das Styling eines Inline-Elements wie eines Links oder eines Absatzes bei Inline-Ereignissen wie und OnFocus problematisch wird. In diesem Fall ist das Hinzufügen von dreißig Pixeln zur Größe einer Schaltfläche kein Problem.

Das Problem mit Ihrem Code ist, dass die Variable, die Sie Ihre #title ‚s-Wert sind die Zuordnung zu den lokalen (es ist in den Anwendungsbereich der showstreet(), von denen nur durch zuvor erwähnte Funktion zugegriffen werden kann) - macht nichts, dass es nie wieder benutzt. Sie speichern einen Wert, es warnt den Benutzer, und das ist es - es wird nie neu zugewiesen oder wiederverwendet, also wird es für immer als der Straßenname bleiben, den sie eingegeben haben, Sie werden es nie sehen, es sei denn, Sie wenden es auf etwas an.

Ich habe eine Weile gebraucht, um herauszufinden, was genau Sie sparen wollen, aber ich denke, ich habe es geschafft.

Hier ist der Code, den ich erstellt habe.

var streetValue = "Your street will appear here."; 


    function clickedField() { 

     // Init title 
     document.getElementById('title').innerHTML = streetValue; 

     // Reset field 
     document.getElementById('street').value = ''; 

    } 


    function saveValue() { 
     // Reassign streetValue 
     streetValue = document.getElementById('street').value; 

     // Checking if value was left empty 
     if (streetValue === '') { 
      document.getElementById('title').innerHTML = "Error: No Street Entered!"; 
     } else { 
      document.getElementById('title').innerHTML = streetValue; 
     } 
    }

(ich bin nicht ganz sicher, was Sie onblur mußten, aber es sollte sehr einfach sein, wieder einfügen Wenn Sie Hilfe mit, dass benötigen, Kommentar auf meine Antwort, ich werde glücklich sein zu)

Nun, wenn wir den HTML-Code mit den approprate Funktionen aktualisieren.

<div id="title" class="pad5" style="">STREET NAME</div> 
<div> 
    <input id="street" type="text" name="street" value="street" class="pad5" 
    onfocus="clickedField()"> 
</div> 
<br> 
<div> 
    <input type="button" value="Save" class="pad30" onclick="saveValue()"> 
</div>

Quelle

2016-06-04 04:46:48 Crowes

Onblur zu verwenden, wird aus zwei Gründen verwendet. 1: um den Feldtitel beizubehalten, wenn er leer ist. 2: Entfernen Sie den Feldtitel über dem Eingabefeld, während sich der Benutzer in einem anderen Feld befindet. Die Idee besteht darin, Platz zu sparen, indem der Titel innerhalb des Feldes platziert wird und nur oben angezeigt wird, während der Fokus darauf liegt, den Benutzer daran zu erinnern, wo er sich gerade befindet. Allerdings mag ich eine Menge von dem, was Sie hier haben. Ich habe Padding nur verwendet, um das Problem zu zeigen. Vielleicht hätte ich das draußen lassen sollen. Bisher scheint onMouseDown anstelle von onClick zu funktionieren. – Airman

Javascript onclick sendet keinen Wert während der Fokus der Texteingabe

Antwort

Verwandte Themen