sélection de texte avec javascript est pas visible dans le chrome

Question

problème: Quand régler la sélection du texte à l'aide par programme setSelectionRange (dans une zone d'entrée plus étroite que la teneur), la partie désirée est sélectionnée mais la sélection ne défile pas en visibilité . Semble se produire sur le chrome et l'opéra. Fonctionne pour Firefox et Edge. Il s'agit en fait d'un problème connu depuis 2014 selon le chromium bug report. Donc, je suis principalement intéressé par une solution de contournement parce que ce problème provoque un autre effet secondaire étrange dans mon application.

J'ai déjà essayé des délais d'attente, des paires supplémentaires de flou de mise au point.

cas minimal avec l'entrée suivante:

<input id="text" type="text" value="123456789" size="2"/> 

et la fonction suivante:

function selectText() { 
    var input= document.getElementById("text"); 
    input.focus(); 
    setTimeout(function(){ //workaround for edge 
     input.setSelectionRange(7,9,"forward"); 
    }, 1); 
} 

Voici le code d'essayer.

Answer 1

En combinant quelques techniques différentes, telles que l'utilisation de .focus() et la définition de .scrollLeft à scrollWidth, vous pouvez relativement facilement résoudre ce problème. Échantillon de code ci-dessous (basé sur le Fiddle fourni), ainsi que dans this Fiddle. Faites-moi savoir si cela fonctionne comme prévu dans tous les navigateurs (seulement testé pour Chrome).

function selectText() { 
 
    var input = document.getElementById("text"); 
 
    input.focus(); 
 

 
    var txt = input.value; 
 
    setTimeout(function() { 
 
    document.getElementById("text").focus(); 
 
    document.getElementById("text").scrollLeft = document.getElementById("text").scrollWidth; 
 
    document.getElementById("text").setSelectionRange(7, 9, "forward"); 
 
    document.getElementById("selection").innerHTML = "selection is: " + txt.substring(input.selectionStart, input.selectionEnd); 
 
    }, 1); 
 

 

 
}

<p id="selection"></p> 
 
<input id="text" type="text" value="123456789" size="2" /> 
 
<input type="button" value="Select" id="select" onclick="selectText()">