Как получить выбранную позицию текста / каретки для ввода, которое не имеет фокуса? - PullRequest
Новая
       39

Как получить выбранную позицию текста / каретки для ввода, которое не имеет фокуса?

7 голосов
/ 01 марта 2011

Можно ли (надежно) получить выбранную позицию текста / каретки в текстовом поле ввода, если это поле не имеет фокус?

Если нет, как лучшеполучить и сохранить эти данные?

По сути, когда пользователь нажимает кнопку, я хочу вставить какой-то текст в позицию каретки.Однако, как только пользователь нажимает эту кнопку, поле теряет фокус, и я теряю позицию каретки.

Ответы [ 2 ]

9 голосов
/ 01 марта 2011

Следующий скрипт будет удерживать позицию каретки, а затем нажатие кнопки вставит текст в сохраненную позицию:

Javascript: 

<script type="text/javascript">
//Gets the position of the cursor
function getCaret(el) { 
  if (el.selectionStart) { 
    return el.selectionStart; 
  } else if (document.selection) { 
    el.focus(); 

    var r = document.selection.createRange(); 
    if (r == null) { 
      return 0; 
    } 

    var re = el.createTextRange(), 
        rc = re.duplicate(); 
    re.moveToBookmark(r.getBookmark()); 
    rc.setEndPoint('EndToStart', re); 

    return rc.text.length; 
  }  
  return 0; 
}

function InsertText() {
    var textarea = document.getElementById('txtArea');
    var currentPos = getCaret(textarea);
    var strLeft = textarea.value.substring(0,currentPos);
    var strMiddle = "-- Hello World --";
    var strRight = textarea.value.substring(currentPos,textarea.value.length);
    textarea.value = strLeft + strMiddle + strRight;
}
</script>

HTML: 

<textarea id="txtArea" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea>
<button onclick="InsertText();">Insert Text</button>

Сценарий можно изменить, если вы хотите сохранить позицию каретки в переменной onblur.

4 голосов
/ 01 марта 2011

Используйте следующие 2 функции для сохранения и восстановления выделения текста. 

function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}

Проверьте рабочий пример на http://jsfiddle.net/LhQda/

Введите что-то в TEXTAREA, затем щелкните за пределами TEXTAERA, чтобы потерять выделение, затем нажмите кнопку фокусировки, чтобы восстановить выделение и снова сфокусироваться.

...