2013-08-26 5 views
9

Итак, у меня есть контент-доступный div в моем приложении Rails и должен иметь возможность отображать небольшое всплывающее окно над текстом, когда оно выделено. В настоящее время у меня есть код, который работает, и он отображает выделенный текст в сообщении. Тем не менее, функция выполняется в mouseup, поэтому, когда вы нажимаете на div для начала ввода или выделения, он выдает пустое предупреждение.Получить выделенный текст в ContentEditable DIV?

Вот мой код:

function getSelected() { 
      if (window.getSelection) { 
       return window.getSelection(); 
      } 
      else if (document.getSelection) { 
       return document.getSelection(); 
      } 
      else { 
       var selection = document.selection && document.selection.createRange(); 
       if (selection.text) { 
        return selection.text; 
       } 
       return false; 
      } 
      return false; 
     }; 
$("#content-create-partial").bind("mouseup", function(){ 
       var text = getSelected(); 
       if(text) { 
        console.log(text); 
       } 
       else{ 
        console.log("Nothing selected?"); 
       }; 
      }); 

Как предотвратить JQuery от выполнения функции, когда пользователь нажимает на contentEditable DIV? Я хочу, чтобы он выполнялся только при отображении фактического текста.

ответ

-2

Просто проверьте, если выбор пуст: if ($.trim(text) != '') ...

0

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

Edit:

Check - HTML Content Editable div: select text event

2

Вы можете сравнить window.getSelection().anchorOffset и window.getSelection().extentOffset, чтобы увидеть, если они равны. Если они есть, то это был обычный щелчок.

1

Следующее вернет true, если ничего не выбрано.

Вдохновленный от @Tarun Dugar. Но он не работал во всех браузерах. Работало.

window.getSelection().focusOffset == window.getSelection().anchorOffset;