Je veux garder le champ de texte concentré, malgré le fait de cliquer sur le div rouge. J'essaye différentes méthodes, pourquoi rien ne fonctionne?

function stopEvent(e) {
   e.stopPropagation();
   e.preventDefault();
   return false;    
}
function setFocus(e) {
   document.getElementById("textField").focus();
   stopEvent(e);
}
document.getElementById("textField").focus();
<div onmouseover="setFocus(event);" onfocus="this.blur();">
  <div style="background-color:red; height:100px;" onclick="stopEvent(event)" onfocus="this.blur();">Click area</div>
  <div><input id="textField" type="text" value="focused" /></div>
</div>
  
  
0
scriptfoo 19 mai 2020 à 17:12

3 réponses

Meilleure réponse

Vous avez utilisé stopEvent au lieu de setFocus sur votre div de zone de clic. De plus, vous n'avez pas retourné false dans le setFocus, donc le retour false dans stopEvent était inutile.

function stopEvent(e) {
   e.stopPropagation();
   e.preventDefault();
   return false;    
}
function setFocus(e) {
   document.getElementById("textField").focus();
   return stopEvent(e);
}
document.getElementById("textField").focus();
<div onmouseover="setFocus(event);" onfocus="this.blur();">
  <div style="background-color:red; height:100px;" onclick="setFocus(event)" onfocus="this.blur();">Click area</div>
  <div><input id="textField" type="text" value="focused" /></div>
</div>
1
George 19 mai 2020 à 14:22

Tu peux faire cette astuce

const field = document.getElementById("textField");

field.addEventListener("blur", function( event ) {
  setTimeout(function () {
      field.focus();
    }, 100);   
}, true);
<div style="background-color:red; height:100px;">Click area</div>
<div><input id="textField" type="text" value="focused" /></div>
1
Isa 19 mai 2020 à 14:24

Ajoutez simplement document.getElementById("textField").addEventListener('blur',() => document.getElementById("textField").focus()) si vous voulez qu'il soit toujours concentré.

document.getElementById("textField").focus();
document.getElementById("textField").addEventListener('blur',() => 
document.getElementById("textField").focus())
<div>
  <div style="background-color:red; height:100px;">Click area</div>
  <div><input id="textField" type="text" value="focused" /></div>
</div>

Si vous souhaitez vous recentrer lorsque vous cliquez sur le div rouge, ajoutez simplement un écouteur d'événement «clic» au redDiv.

window.textField.focus();
window.redBox.addEventListener('click',() => window.textField.focus())
<div>
  <div id="redBox" style="background-color:red; height:100px;">Click area</div>
  <div><input id="textField" type="text" value="focused" /></div>
</div>
1
radulle 19 mai 2020 à 14:25