2013-08-26 35 views
9

Vì vậy, tôi có một div có thể chỉnh sửa nội dung trong ứng dụng Rails của mình và cần có thể hiển thị cửa sổ bật lên nhỏ phía trên văn bản khi được đánh dấu. Hiện tại tôi có mã hoạt động và nó hiển thị văn bản được đánh dấu trong một cảnh báo. Tuy nhiên, hàm thực hiện trên mouseup, vì vậy khi bạn nhấp vào div để bắt đầu nhập hoặc đánh dấu, nó sẽ phát ra một cảnh báo trống.Nhận văn bản được chọn trong DIV có thể chỉnh sửa nội dung?

Dưới đây là mã của tôi:

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

Làm thế nào để ngăn chặn jQuery từ thực hiện các chức năng khi người dùng nhấp vào div contentEditable? Tôi chỉ muốn nó thực thi khi văn bản thực sự được tô sáng.

Trả lời

-2

Chỉ cần kiểm tra nếu việc lựa chọn là rỗng: if ($.trim(text) != '') ...

0

Có "selectstart" sự kiện mà cháy khi người dùng bắt đầu lựa chọn. Không có sự kiện kết thúc lựa chọn nào nhưng bạn có thể nghe sự kiện mouseup sau khi sự kiện "selectstart" được kích hoạt để đảm bảo lựa chọn đã xảy ra.

Edit:

Kiểm tra - HTML Content Editable div: select text event

2

Bạn có thể so sánh window.getSelection().anchorOffsetwindow.getSelection().extentOffset để xem họ đều bình đẳng. Nếu có, thì đó chỉ là một cú nhấp chuột bình thường.

1

Sau đây sẽ trả về true nếu không có gì được chọn.

Lấy cảm hứng từ @Tarun Dugar. Nhưng không hoạt động trên tất cả các trình duyệt. Sau đây đã làm việc.

window.getSelection().focusOffset == window.getSelection().anchorOffset; 
Các vấn đề liên quan