Question

我正在尝试创建一个内联文本区域，用户单击一段文本，然后用textarea替换它。

一切顺利，但当我尝试在区域中选择/突出显示文本时，它会显示textarea。

我注意到在Trello上，它设法避免这种情况。

我的HTML如下：

<h2>Your Notes</h2>
<span id="notes_area" style="display: block;" data-entry-id="<%= @entry.id %>" title="Click to edit your notes.">
    <p><%= @entry.notes.present? ? "#{@entry.notes}" : "You have not added any notes for this episode." %></p>
</span>

我的CoffeeScript如下（有很多剪辑）：

$("#notes_area").bind "mouseup", ->
    display_inline_note_form()

display_inline_note_form = ->
    # code goes here...

我认为这是一个已解决的问题，但我似乎无法在网上找到任何内容。

由于

Answer 1

您可以在调用'display_inline_note_form（）'之前检查用户是否选择了任何文本。

$("#notes_area").bind "mouseup", ->
    var selectedTxtRange = getSelectedText();
    if(selectedTxtRange.toString().length == 0)
        display_inline_note_form()

这是getSelectedText（）定义，我得到了这个code snippet from CodeToad，

function getSelectedText()
{
    var txt = '';

     if (window.getSelection)
    {
        txt = window.getSelection();
             }
    else if (document.getSelection)
    {
        txt = document.getSelection();
            }
    else if (document.selection)
    {
        txt = document.selection.createRange().text;
            }

      return txt;    
}

jQuery：捕获一个单击，但仍然允许选择文本

1 个答案: