Das mobile Terminal führt die Auswahl durch und hebt alle ausgewählten Textereignisse hervor

Dieses Mal zeige ich Ihnen das Ereignis zum Auswählen und Hervorheben des gesamten ausgewählten Textes auf dem mobilen Endgerät ist ein praktischer Fall, werfen wir einen Blick darauf. Kürzlich müssen wir eine Kopierfunktion auf der Seite für HTML5 WebAPP implementieren: Wenn der Benutzer auf den Text klickt und ihn lange drückt, wird der gesamte Text ausgewählt und das Systemmenü „Kopieren“ wird angezeigt. Der Benutzer kann auf „Kopieren“ klicken, um den Kopiervorgang durchzuführen, und ihn dann in „Suche im AppStore“ nach der entsprechenden Anwendung einfügen. Der Grund dafür, dass das Linkformular nicht verwendet wird, um direkt zur entsprechenden AppStore-Anwendung zu springen, besteht darin, das Gewicht der beworbenen Unternehmens-App durch die aktive Eingabe von Schlüsselwortsuchen durch den Benutzer zu erhöhen. Daher ist diese „Kopieren“-Funktion für das Benutzererlebnis von entscheidender Bedeutung.

Ich habe einige Methoden ausprobiert, aber die Kompatibilität auf der Android/iOS-Plattform ist nicht sehr gut. Im WeChat-Browser ist es einfach, lange auf Text zu drücken, um das Systemmenü zu aktivieren und alle ausgewählten Textinhalte hervorzuheben. Allerdings ist die Leistung in anderen Browsern nicht sehr konsistent. Einschließlich der Simulation der Fokuseingabe, der

JavaScript

-Auswahl und der Verwendung des a-Tags, um zu versuchen, das Systemmenü zu aktivieren. Diese Methoden weisen alle Kompatibilitätsmängel auf. 1) Obwohl Sie das a-Tag mit dem href-Attribut verwenden und lange auf den Text im UC-Browser und Baidu-Browser drücken, erscheint das Menü „Kostenlose Kopie“/„Text auswählen“. Es erscheint das Menü „Auswählen/Kopieren“, aber in den Systembrowsern einiger Android-Telefone und iPhones wird es als reiner Link betrachtet und es erscheint nur „Link kopieren“ ohne das Menü „Text kopieren“. Selbst wenn nur eine kleine Anzahl von Browsern als machbar angesehen wird, bedeutet dies, dass die Bedienung des Benutzers um einen weiteren Schritt erweitert und die Komplexität erhöht wird. Daher ist diese Lösung nicht ratsam.

2) Bei der Verwendung von Auswahl und Bereich muss die Kompatibilität verschiedener Browser berücksichtigt werden. Der Code lautet wie folgt:

Leider ist das Klicken immer noch nicht möglich oder lange auf iPhone Safari drücken. Markieren Sie den gesamten Text (da window.getSelection auch unterstützt wird, warum kann der Text nach dem addRange-Vorgang in Safari nicht standardmäßig ausgewählt werden? Wenn Sie den Grund kennen, hinterlassen Sie bitte eine Nachricht). Daher ist dieser Ansatz fehlerhaft. Die Methode zur aktiven Auswahl eines Textbereichs wird später angehängt.

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");  
  }  
}

3) iPhone-Benutzer wissen möglicherweise, dass Safari automatisch den gesamten Text in der Auswahl hervorhebt und auswählt, wenn Sie lange auf den leeren Bereich um den Text in einer Textauswahl drücken (der Zieltext muss in einem platziert werden). unabhängiger p-Container auf Blockebene). Verwenden Sie gemäß dieser Funktion die CSS-Marge, um sie zu ändern. Mit dieser Funktion können Sie die Inkompatibilität der zweiten Methode oben auf iOS-Geräten beheben. Nach dem Test sind die Systembrowser, die mit allgemeinen Mobiltelefonen geliefert werden, unabhängig von der Android- und iOS-Plattform kompatibel. Bei mobilen Produkten anderer Hersteller wie UC Browser und Baidu Browser können Sie aufgrund unterschiedlicher Mechanismen nur die Funktion „Kostenloses Kopieren“ nutzen, die in diesen Browsermenüs bereitgestellt wird.

Also habe ich die zweite und dritte Methode kombiniert und das Taphold-Ereignis in jQuery Mobile verwendet, um den Longtap-Vorgang zu simulieren, um das Kopiermenü des mobilen Systems auszulösen Sie können lange auf den Textbereich drücken, um den gesamten Textinhalt hervorzuheben. Eine weitere Sache: Die kompatiblen Fehler von taphold werden hier nicht detailliert beschrieben und die Lösungen sind nicht enthalten. Wenn Ihr Projekt Exzellenz erfordert, können Sie selbst nach Lösungen suchen.

Meine Lösung ist unten aufgeführt. Der spezifische Code lautet wie folgt:

HTML-Code:

JavaScript-Code:

<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>

Schlüssel-CSS-Code:

 <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>

Anleitung: Der Rand hier: 2em dient genau dazu, die Funktion „Alles auswählen“ im Safari-Browser durch langes Drücken zu realisieren. Um den Effekt der Wiederherstellung des Designentwurfs zu berücksichtigen, verwendet der übergeordnete Container .cparea negative Ränder, um den äußeren Rand dieses 2em auszugleichen . Am Ende stimmte es nicht nur optisch mit der Konstruktionszeichnung überein, sondern ermöglichte auch, durch langes Drücken alles auszuwählen, um das Systemmenü zu aktivieren.

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;  
}

Lassen Sie mich abschließend die vollständige Methode zur Unterstützung von Safari hinzufügen:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen erhalten Sie zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

$("#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);   
}

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung datumsbezogener Funktionen in JS

Detaillierte Erläuterung der Verwendung von faltbaren Paneelen in JS

Das obige ist der detaillierte Inhalt vonDas mobile Terminal führt die Auswahl durch und hebt alle ausgewählten Textereignisse hervor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!