Le terminal mobile implémente les événements de texte sélectionnés et mis en évidence

Cette fois, je vous présenterai l'événement de sélection et de mise en surbrillance de tout le texte sélectionné sur le terminal mobile. Quelles sont les précautions lors de la mise en œuvre de l'événement de sélection et de mise en surbrillance de tout le texte sélectionné sur le terminal mobile Ici. est un cas pratique, jetons un coup d'oeil.

Récemment, nous avons besoin d'implémenter une fonction de copie sur la page pour HTML5 WebAPP : lorsque l'utilisateur clique et appuie longuement sur le texte, tout le texte sera sélectionné et le menu système "Copier" apparaîtra. L'utilisateur peut cliquer sur « Copier » pour effectuer l'opération de copie, puis la coller dans Rechercher dans l'AppStore l'application correspondante. La raison pour laquelle le formulaire de lien n'est pas utilisé pour accéder directement à l'application AppStore correspondante est d'augmenter le poids de l'application d'entreprise promue grâce à la saisie active par l'utilisateur de recherches par mots clés. Cette fonction de « copie » est donc cruciale pour l’expérience utilisateur.

J'ai essayé quelques méthodes, mais la compatibilité sur la plateforme Android/iOS n'est pas très bonne. Dans le navigateur WeChat, il est facile d'appuyer longuement sur le texte pour activer le menu système et mettre en surbrillance tout le contenu textuel sélectionné. Mais les performances dans les autres navigateurs ne sont pas très cohérentes. Y compris la simulation de l'entrée de focus, la sélection JavaScript et l'utilisation de la balise a pour essayer d'activer le menu système. Ces méthodes présentent toutes des défauts de compatibilité.

1) Bien qu'en utilisant la balise a avec l'attribut href et en appuyant longuement sur le texte sur le navigateur uc et le navigateur Baidu, le menu "copie gratuite"/"sélectionner le texte" apparaîtra. Après avoir sélectionné ce menu, le menu "complet". text" apparaîtra. Le menu "Sélectionner/Copier", mais dans les navigateurs système de certains téléphones Android et iPhones, il est considéré comme un pur lien, et seul "Copier le lien" apparaît sans menu "Copier le texte". De plus, même si seul un petit nombre de navigateurs est considéré comme réalisable, cela ajoutera une étape supplémentaire au fonctionnement de l'utilisateur et augmentera la complexité. Cette solution n'est donc pas conseillée.

2) La méthode d'utilisation de la sélection et de la plage doit prendre en compte la compatibilité des différents navigateurs. Le code est le suivant :

function selectText(element) {  
  var doc = document,  
      text = docgetElementById(element),  
      range,  
      selection;  
  
  if (docbodycreateTextRange) {  
      range = documentbodycreateTextRange();  
      rangemoveToElementText(text);  
      rangeselect();  
  } else if (windowgetSelection) {  
      selection = windowgetSelection();          
      range = documentcreateRange();  
      rangeselectNodeContents(text);  
      selectionremoveAllRanges();  
      selectionaddRange(range);  
      /*if(selectionsetBaseAndExtent){ 
          selectionsetBaseAndExtent(text, 0, text, 1); 
      }*/  
  }else{  
      alert("none");  
  }  
}

Malheureusement, il n'est toujours pas possible de cliquer. ou appuyez longuement sur iPhone Safari. Mettez en surbrillance tout le texte (puisque window.getSelection est également pris en charge, pourquoi le texte ne peut-il pas être sélectionné par défaut après l'opération addRange dans Safari ? Si vous connaissez la raison, veuillez laisser un message). Cette approche est donc erronée. La méthode de sélection active d'une zone de texte est jointe ultérieurement.

3) Les utilisateurs d'iPhone savent peut-être que si vous appuyez longuement sur la zone vide autour du texte dans une sélection de texte, Safari mettra automatiquement en surbrillance tout le texte de la sélection (le texte cible doit être placé dans un p conteneur au niveau du bloc). Selon cette fonctionnalité, utilisez la marge CSS pour la modifier. Grâce à cette fonctionnalité, vous pouvez résoudre l'incompatibilité de la deuxième méthode ci-dessus sur les appareils iOS. Après tests, quelles que soient les plateformes Android et iOS, les navigateurs système fournis avec les téléphones mobiles généraux sont compatibles. Quant aux produits mobiles d'autres fabricants tels que UC Browser et Baidu Browser, en raison de mécanismes différents, vous ne pouvez utiliser que la fonction « copie gratuite » fournie par ces menus de navigateur.

J'ai donc combiné les deuxième et troisième méthodes et utilisé l'événement taphold dans jQuery mobile pour simuler l'opération de frappe longue afin de déclencher le menu de copie du système mobile. Cela peut essentiellement être fait sur tous les navigateurs d'appareils mobiles. Vous pouvez appuyer longuement sur la zone de texte pour mettre en évidence tout le contenu du texte. Encore une chose, les bugs compatibles de taphold ne sont pas détaillés ici et les solutions ne sont pas incluses. Si votre projet requiert l'excellence, vous pouvez rechercher vous-même des solutions.

Ma solution est répertoriée ci-dessous. Le code spécifique est le suivant :

Code HTML :

<p class=" para requirement">  
    <p class="tips tips-t">  
        1、必须首次下载才生效<br/>  
        2、不能从排行榜下载哦  
    </p>  
    <p class="cparea">  
        <p class="kwd" id="kwd"><span>三国艳义手机优化大师</span></p>                   
    </p>  
    <p class="cparea">  
        <span class="kdes"><b>★</b>长按虚线框,拷贝关键词</span>  
    </p>  
    <a href="https://itunesapplecom/cn/" data-role="button" class="downlink">去AppStore搜索下载</a>  
</p>

Code JavaScript :

 <script type="text/javascript">  
  
$("#kwd")bind("taphold", function(){ //不支持iPhone/iTouch/iPad Safari  
    var doc = document,   
        text = docgetElementById("kwd"),  
        range,   
        selection;  
    if (docbodycreateTextRange) {  
        range = documentbodycreateTextRange();  
        rangemoveToElementText(text);  
        rangeselect();  
    } else if (windowgetSelection) {  
        selection = windowgetSelection();          
        range = documentcreateRange();  
        rangeselectNodeContents(text);  
        selectionremoveAllRanges();  
        selectionaddRange(range);   
    }else{  
        alert("浏览器不支持长按复制功能");  
    }         
});  
  
</script>

Code CSS clé :

cparea{  
    text-align: center;  
    font-family: Microsoft Yahei;  
    margin: -2em 0 0;  
}  
kwd{  
    display: inline-block;  
    color: #272727;  
    background-color: #fff;  
    font-size: 1875em;  
    font-size: 1875em;  
    padding: 75em 1em;  
    border: 1px dashed #e60012;  
    -webkit-user-select:element;   
    margin: 2em;  
}  
kwd span{  
    display: block;   
    border: 1px solid #fff;  
}  
kdes{  
    display: inline-block;  
    color: #212121;  
    font-size: 875em;  
    padding-top: 0;  
}  
kdes b{  
    color: #ed5353;  
    font-size: 25em;  
    padding-right: 1em;  
}

Instructions : La marge ici : 2em sert précisément à réaliser la fonction de sélection de tout en appuyant longuement sur le navigateur Safari. Afin de respecter l'effet de restauration du brouillon de conception, le conteneur parent .cparea utilise des marges négatives pour compenser la marge extérieure de ce 2em. . Au final, non seulement cela était visuellement cohérent avec le dessin de conception, mais cela permettait également d'appuyer longuement sur tout sélectionner pour activer le menu système.

Enfin, permettez-moi d'ajouter la méthode complète pour prendre en charge Safari :

$("#kwd").bind("taphold", function(){  
    var doc = document,   
        text = docgetElementById("kwd"),  
        range,   
        selection;  
    if (docbodycreateTextRange) { //IE  
        range = documentbodycreateTextRange();  
        rangemoveToElementText(text);  
        rangeselect();  
  
    } else if (windowgetSelection) {   //FF CH SF  
        selection = windowgetSelection();          
        range = documentcreateRange();  
        rangeselectNodeContents(text);  
        selectionremoveAllRanges();  
        selectionaddRange(range);  
  
        //测试  
        consolelog(texttextContent);  
        textinnerText && consolelog(textinnerText);  //FireFox不支持innerText  
        consolelog(texttextContentlength);  
        textinnerText && consolelog(textinnerTextlength);   //在Chrome下长度比IE/FF下多1  
        consolelog(textfirstChildtextContentlength);  
        textinnerText && consolelog(textfirstChildinnerTextlength);  
        consolelog(textfirstChildinnerHTMLlength);  
  
        //注意IE9-不支持textContent  
        makeSelection(0, textfirstChildtextContentlength, 0, textfirstChild);  
        /* 
        if(selectionsetBaseAndExtent){ 
            selectionselectAllChildren(text); 
            selectionsetBaseAndExtent(text, 0, text, 4); 
        } 
        */  
    }else{  
        alert("浏览器不支持长按复制功能");  
    }  
  
});  
function makeSelection(start, end, child, parent) {  
    var range = documentcreateRange();  
    //consolelog(parentchildNodes[child]);  
    rangesetStart(parentchildNodes[child], start);  
    rangesetEnd(parentchildNodes[child], end);  
  
    var sel = windowgetSelection();  
    selremoveAllRanges();  
    seladdRange(range);   
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention. vers d'autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Explication détaillée de l'utilisation des fonctions liées aux dates dans JS

Explication détaillée de l'utilisation de panneaux pliables en JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!