JavaScript의 Accelerator UI

클라이언트 측 JavaScript를 사용하여 Internet Explorer 액셀러레이터와 같은 것을 만들 수 있습니까?JavaScript의 Accelerator UI

사용자가 페이지에서 일부 텍스트를 선택하면 클릭 가능한 아이콘이 표시되기를 원합니다.

내가 기다려야 할 이벤트가 무엇인가요?

2010-03-14 sonofdelphi

예. __________ – kennytm

본질적으로 아이디어는 document.onmouseup 이벤트를 적절하게 처리하고 숨겨진 "가속기"div을 표시하고 선택된 텍스트를 검색하는 것입니다.

나는 다음 샘플 당신을위한 좋은 출발점이 될 것 같아요

<html> 
<head> 
    <script> 
     function getSelectedText() { 
      var selection = ''; 
      if (window.getSelection) selection = window.getSelection().toString();  
      else if (document.getSelection) selection = document.getSelection();     
      else if (document.selection) selection = document.selection.createRange().text; 
      return selection; 
     } 

     function showAccelerator(x, y){ 
      var text = getSelectedText(); 
      if (text !== ''){ 
       accelerator.style.display = ''; 
       accelerator.style.left = x; 
       accelerator.style.top = y; 
       timeout_id = setTimeout(hideAccelerator, 1000); 
      } else { 
       hideAccelerator() 
      } 
     } 

     function hideAccelerator(){ 
      clearTimeout(timeout_id); 
      accelerator.style.display='none'; 
     } 

     function isAcceleratorHidden(){ 
      return accelerator.style.display === 'none'; 
     } 

     function onMouseUp(evt){ 
      if (isAcceleratorHidden()){ 
       var event2 = (document.all) ? window.event : evt; 
       showAccelerator(event2.clientX, event2.clientY); 
      } 
     } 

     function alertSelection(){ 
      alert(getSelectedText()); 
     } 

     document.onmouseup = onMouseUp; 
    </script> 
</head> 
<body> 
    <div id="accelerator" style="position: absolute; width: 100px; left: 0px; top: -50px; display: none; border: solid; background-color : #ccc;"> 
     accelerator div<input type="button" value="alert" onclick="alertSelection();" /> 
    </div> 
    <p> 
     sometext<br/><br/><br/> 
     even more text 
    </p> 
</body> 
</html>

출처

2010-03-14 15:08:25 Li0liQ

는 아마 가장 좋은 방법은 당신이를 변경할 수있는 선택을 반환하고 다른 그것을 조작 할 수

function hasSelection() { 
    var selText = ""; 
    if (document.selection) { // IE 
    selText = document.selection.createRange().text; 
    } else() { // Standards-based browsers 
    selText = document.getSelection(); 
    } 
    // This simple example does not include legacy browsers like Netscape 4, etc. 
    if (selText !== "") { 
    return true 
    } 
    return false; 
}

처럼 선택을 테스트하는 함수를 호출하는 페이지에 와 mouseUp 리스너를 설정하는 것입니다 방법. 그러나 여기에 반환 된 부울은 버튼이 표시되는지 여부를 결정할 수 있습니다.

attachEvent (IE의 경우) addEventListener (Firefox의 경우) al을 호출하고 mouseup 이벤트를 수신합니다.

출처

2010-03-14 14:44:24 Robusto

JavaScript의 Accelerator UI

답변

관련 문제