Интерфейс ускорителя в JavaScript - PullRequest
Новая
       22

Интерфейс ускорителя в JavaScript

3 голосов
/ 14 марта 2010

Могу ли я создать что-то вроде ускорителя Internet Explorer, используя JavaScript на стороне клиента?

Я хочу, чтобы щелкающий значок отображался, когда пользователь выбирает какой-либо текст на странице.

Какое событие я должен ждать?

Ответы [ 2 ]

2 голосов
/ 14 марта 2010

По сути, идея состоит в том, чтобы правильно обработать событие 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>
1 голос
/ 14 марта 2010

Вероятно, лучший способ - установить на странице прослушиватель mouseup , который вызывает функцию, проверяющую выбор, например 

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

Вы можете изменить это, чтобы вернуть выделение и манипулировать им другими способами. Но возвращенное здесь логическое значение может определить, появляется ли ваша кнопка.

Используйте attachEvent для IE и addEventListener для Firefox, et. al, и слушайте событие mouseup.

...