在iPhone/iPad Web浏览器Safari浏览器中选择和突出显示文本无法正常工作

本文介绍了在iPhone/iPad Web浏览器Safari浏览器中选择和突出显示文本无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

可能的重复项:使用JavaScript更改所选文本的CSS

我尝试了上面链接中的代码，但没有得到iPad浏览器突出显示所选文本的结果.

I tried the code from above link but not getting the result for iPad browser to highlight the selected text.

function makeEditableAndHighlight(colour) { var range, sel = window.getSelection(); if (sel.rangeCount && sel.getRangeAt) { range = sel.getRangeAt(0); } document.designMode = "on"; if (range) { sel.removeAllRanges(); sel.addRange(range); } // Use HiliteColor since some browsers apply BackColor to the whole block if (!document.execCommand("HiliteColor", false, colour)) { document.execCommand("BackColor", false, colour); } document.designMode = "off"; } function highlight(colour) { var range, sel; if (window.getSelection) { // IE9 and non-IE try { if (!document.execCommand("BackColor", false, colour)) { makeEditableAndHighlight(colour); } } catch (ex) { makeEditableAndHighlight(colour) } } else if (document.selection && document.selection.createRange) { // IE <= 8 case range = document.selection.createRange(); range.execCommand("BackColor", false, colour); } }

它可以在Safari和chrome等桌面浏览器中完美运行.但是对于iPad Safari浏览器来说，选择方式与任何桌面浏览器都不一样，因此选择文本的方式也不尽相同.

It works flawlessly in desktop browser like safari, chrome. But in case of iPad safari browser, the way of selection is not similar to text selection as in any desktop browser and I am not getting the outcome to highlight the text.

我简单的HTML代码是:

My simple HTML code is:

<div><h1>Introduction </h1></div> <div> <p>This is an example: </p> <p>in other paragraph.</p> <p>one more paragraph </p> <button type="button" onclick="highlight('yellow')">Click Me!</button> </div>

请建议是否需要进行任何更改或是否需要包含其他任何api.

Please suggest if any changes need to be made or any other api needs to be included.

推荐答案

您必须通过touchend -event(和用于桌面支持的+ click)来触发highlight-函数:

You've to trigger the highlight-function via touchend-event (and + click for desktop support):

jQuery

$('button').on('click touchend', function() { highlight('yellow'); });

小提琴

Fiddle