Question

I’m attempting to create an inline textarea, where a user clicks a paragraph of text and a textarea replaces it.

It’s all going well, but when I attempt to select/highlight text in the area it displays the textarea.

I notice that on Trello, it manages to avoid this.

My HTML is as follows:

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

And my CoffeeScript is as follows (with a lot cut-out):

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

display_inline_note_form = ->
    # code goes here...

I’d imagine this is a solved problem, but I can’t seem to find anything on the web.

Thanks

Answer 1

You can check whether user has selected any text before invoking ‘display_inline_note_form()’.

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

Here is the getSelectedText() definition, I got this 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;    
}