선택과 아이폰/아이 패드 웹 브라우저 사파리가

Question

가능한 중복 작동하지 않는 텍스트의 강조는 : Change CSS of selected text using Javascript

나는 위의 링크 만 선택한 텍스트를 강조하기 위해 아이 패드 브라우저의 결과를 얻지 못하고의 코드를 시도했다.

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

사파리, 크롬과 같은 데스크톱 브라우저에서 완벽하게 작동합니다. 그러나 iPad 사파리 브라우저의 경우, 선택 방법은 데스크톱 브라우저 에서처럼 텍스트 선택과 유사하지 않으며 텍스트를 강조 표시하지 않습니다.

내 간단한 HTML 코드는 다음과 같습니다 어떤 변경이 될 필요가 또는 다른 API를 포함해야하는 경우

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

제안하십시오.

Answer 1

당신은 (데스크톱 지원과 + click) touchend -event를 통해 highlight α- 함수를 트리거했습니다 :

jQuery를 답장을

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

Fiddle