在iPhone/iPad Web浏览器Safari浏览器中选择和突出显示文本无法正常工作 [英] Selection and highlighting of text in iphone/ipad web browser safari not working

问题描述

可能的重复项:使用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

这篇关于在iPhone/iPad Web浏览器Safari浏览器中选择和突出显示文本无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！