1

ユーザーがテキストの段落をクリックすると、テキストエリアがそれを置き換えるインラインテキストエリアを作成しようとしています。

すべて順調ですが、その領域でテキストを選択/強調表示しようとすると、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...

これは解決された問題だと思いますが、Web上で何も見つからないようです。

ありがとう

4

1 に答える 1

1

'display_inline_note_form（）'を呼び出す前に、ユーザーがテキストを選択したかどうかを確認できます。

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

これがgetSelectedText（）の定義です。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;    
}
于 2012-04-20T17:37:17.263 に答える