Premendo Invio all'interno di una casella di testo non si attiva l'evento onclick del pulsante di invio in Firefox

StackOverflow https://stackoverflow.com/questions/1642815

Domanda

Ho questa pagina html che è molto semplice, contiene una casella di testo e un pulsante di invio, quello che voglio è digitare qualcosa nella casella di testo e premere Invio della funzione nell'evento onclick del pulsante che viene chiamato.Funziona in IE e Google Chrome ma non funziona in FireFox, è un comportamento normale di FireFox o manca qualcosa qui?

<html>
<head>
<script language="javascript">
function callMe()
{
   alert("You entered: " + document.getElementById("txt").value);
}
</script>
</head>
<body>
<input type="text" id="txt" />
<input type="submit" value="Submit" onclick="callMe()" />
</body>
</html>
È stato utile?

Soluzione

Dalla descrizione della onclick evento :

  

L'evento onsubmit si verifica quando si fa clic sul pulsante del dispositivo di puntamento su un elemento. Questo attributo può essere utilizzato con la maggior parte degli elementi.

Non vi è alcuna garanzia che l'UA debba generare un tale evento anche quando non utilizza un dispositivo di puntamento e fa clic su qualcosa.

Probabilmente vuoi l'evento FORM su un modulo:

  

L'evento <=> si verifica quando viene inviato un modulo. Si applica solo all'elemento <=> .

Dovrai avvolgere un modulo attorno al campo di testo e al pulsante, tuttavia: 

<html>
  <head>
    <script language="javascript">
      function callMe()
      {
        alert("You entered: " + document.getElementById("txt").value);
      }
    </script>
  </head>
  <body>
    <form onsubmit="callMe()" action="#">
      <input type="text" id="txt" />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Altri suggerimenti

Prova ad aggiungere un modulo con un onsubmit - questo dovrebbe funzionare (testato con FF 3.5): 

<html>
<head>
<script language="javascript">
function callMe()
{
   alert("You entered: " + document.getElementById("txt").value);
}
</script>
</head>
<body>
<form onsubmit="callMe()">
<input type="text" id="txt" />
<input type="submit" value="Submit" />
</form>
</body>
</html>

[modifica Inizialmente ho frainteso la situazione e pubblicato una risposta diversa.]

Neanche per me funziona in Chrome (4.0.223.11).

Il problema è la differenza nel trattamento di < input > s senza un < form > - se si aggiunge un < form > element, l'elemento onclick viene attivato (dovresti comunque utilizzare il gestore di invio del modulo, come Johannes R & # 246; ssel consiglia giustamente.

[modifica aggiunta una nota su HTML5]

Nota che Le specifiche HTML5 menzionano l'invio dell'evento clic sul pulsante di invio :

I programmi utente possono stabilire un pulsante in ciascun modulo come pulsante predefinito del modulo. Questo dovrebbe essere il primo pulsante di invio nell'ordine dell'albero il cui proprietario del modulo è quell'elemento del modulo, ma gli agenti utente possono scegliere un altro pulsante se un altro sarebbe più appropriato per la piattaforma. Se la piattaforma supporta il consentire all'utente di inviare un modulo in modo implicito (ad esempio, su alcune piattaforme che colpiscono la chiave & Quot; immetti & Quot; mentre un campo di testo è focalizzato in modo implicito invia il modulo), quindi il comportamento di attivazione del pulsante predefinito del modulo, se presente, da eseguire.

Notare che non è richiesta l'implementazione dell'attivazione basata su Enter (sebbene sia implementata nei browser desktop) e il " metodo di attivazione " (evento click) può essere utilizzato quando l'input fa parte di un modulo (" ha un proprietario di modulo "). La definizione del & Quot; proprietario del modulo & Quot; si basa sull'avere un < form > padre o un form attributo.

Non vedo la discussione che ha portato a questa decisione, quindi se hai domande, puoi chiedere sulla mailing list di html pubblica dove vengono discusse le specifiche.

Per quanto ne so, non è possibile chiamare "OnClick" all'interno di una "TextBox".Deve essere all'esterno del TextBox.

Se digiti il ​​testo nella casella di testo, fai clic con il pulsante sinistro del mouse in un altro punto della pagina, quindi premi Invio, l'evento OnClick funzionerà, stranamente.

Se trovi una soluzione, faccelo sapere.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top