1

Тема: установка фокуса в определенной позиции поля input js

Кроссплатформенное решение:

function getCaretPosition(ctrl) {
    if (window.document.selection) {//alert("1");
        ctrl.focus();
        var range = window.document.selection.createRange();
        var rangelen = range.text.length;
        range.moveStart('character', -ctrl.value.length);
        var start = range.text.length - rangelen;
        return {
            'start': start,
            'end': start + rangelen
        };
    } else if (ctrl.selectionStart || ctrl.selectionStart == '0') {//alert("2");
        return {
            'start': ctrl.selectionStart,
            'end': ctrl.selectionEnd
        };
    } else {//alert("3");
        return {
            'start': 0,
            'end': 0
        };
    }
}
 
 
function setCaretPosition(ctrl, start, end) {
    if (ctrl.setSelectionRange) {//alert("1");
        ctrl.focus();
        ctrl.setSelectionRange(start, end);
    } else if (ctrl.createTextRange) {//alert("2");
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', end);
        range.moveStart('character', start);
        range.select();
    }
}

Использование:
//прочитаем позицию с выделеним
outpz = getCaretPosition(document.getElementById('summpayme'));
//установим позицию с выделением
setCaretPosition(document.getElementById('summpayme'),outpz.start, outpz.end);


Пробовал на Firefox 52 с полем для ввода поста в ВКонтакте без выделения текста - My_Text:

<div id="post_field" class="submit_post_field dark submit_post_inited" onkeyup="Wall.postChanged()" onkeydown="onCtrlEnter(event, Wall.sendPost)" onfocus="Wall.showEditPost()" role="textbox" aria-multiline="true" contenteditable="true">My_Text</div>

Функция getCaretPosition() отрабатывает в варианте alert("2") с возвратом {start:7, end:7} (в поле поста содержится текст - My_Text , но курсор по умолчанию установлен в позиции начала поля для ввода)
Функция setCaretPosition() вообще не срабатывает. Курсор остается в начальной позиции. Ничего не выделяется.

    var outpz = getCaretPosition(window.document.getElementById('post_field'));
        alert(outpz.start + "   " + outpz['end']);
    outpz.start = outpz.end - 4;
    setCaretPosition(window.document.getElementById('post_field'),outpz.start, outpz.end);

_____________________

    .selectionStart - Chrome/Safari/Firefox
    .setSelectionRange(Pos,Pos) - Chrome/Safari/Firefox/Internet Explorer
    .createTextRange() - Internet Explorer

document.getElementById("email").addEventListener("click", moveCursor);
document.getElementById("email").addEventListener("focus", moveCursor);

function moveCursor(event) {
    event.target.setSelectionRange(0,0);
}

<input value="@website.com" type="text" name="email" id="email"></input>

Поделиться

2

Re: установка фокуса в определенной позиции поля input js

var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6


function GetCursorPos (field) {

  // Initialize
  iCaretPos = 0;

  if (isIE){

    // Set focus on the element
    field.focus();

    // To get cursor position, get empty selection range
    oSel = field.createTextRange();

    // Move selection start to 0 position
    oSel.moveStart('character', -field.value.length);

    // The caret position is selection length
    iCaretPos = oSel.text.length;
  }

  if (isChrome||isSafari){
    iCaretPos = field.selectionStart;
  }

  if (isFirefox){
    iCaretPos = field.selectionStart;
  }

  return iCaretPos;
}

function SetCursorPos (field,Pos) {

  // Set focus on the element
    field.focus();

  if (isIE){
    field.selectionStart=Pos;
  }

  if (isChrome||isSafari){
    field.setSelectionRange(Pos,Pos);
  }

  if (isFirefox){
    field.selectionStart=Pos;
  }

  return;
}

Поделиться

3

Re: установка фокуса в определенной позиции поля input js

Заказать seo поисковую оптимизацию сайта, <a href=http://seoprofisional.ru/>продвижение сайта</a>
Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин pokras7777 Раскрутка сайта под ключ


fhdxxxxxd

Поделиться