Угловое значение this.el.nativeElement.selectionStart всегда null [duplicate]

Я знаю, что этот ответ приходит слишком поздно, но вот плагин, который реализует selectStart для всех типов элементов для большинства браузеров (старый и новый):

https: //github.com/adelriosantiago/caret

Я обновил его для решения проблемы type="number" с помощью ответа @ncohen.

Есть один способ, которым вы можете выполнить это в Chrome (и, возможно, в некоторых других браузерах, но Chrome - большой преступник). Используйте window.getSelection() для извлечения объекта выделения из текущего ввода, а затем тест расширяет выбор назад (или вперед) и видит, изменяется ли значение toString() выбора. Если это не так, курсор находится в конце ввода, и вы можете перейти к следующему входу. Если это так, вы должны затем отменить операцию, чтобы отменить выбор.

s = window.getSelection();
len = s.toString().length;
s.modify('extend', 'backward', 'character');
if (len < s.toString().length) {
    // It's not at the beginning of the input, restore previous selection
    s.modify('extend', 'forward', 'character');
} else {
    // It's at the end, you can move to the previous input
}

Я получил эту идею из этого ответа SO: https://stackoverflow.com/a/24247942

Это происходило для нас при использовании JQuery Numeric Plugin версии 1.3.x, поэтому, обернув selectionStart и selectionEnd с помощью try...catch{}, мы смогли подавить ошибку.

Источник: https://github.com/joaquingatica/jQuery-Plugins/commit/a53f82044759d29ff30bac698b09e3202b456545

В настоящее время единственными элементами, которые позволяют безопасно выбирать текст, являются:

<input type="text|search|password|tel|url">, как описано в: whatwg: selectionStart attribute .

Вы можете также прочитайте документацию для интерфейса HTMLInputElement , чтобы более подробно рассмотреть элементы ввода.

Чтобы преодолеть эту «проблему» безопасно, на данный момент лучше всего работать с <input type="text"> и примените маску / ограничение, которые принимают только числа. Существует ряд плагинов, которые удовлетворяют требованиям:

• http://digitalbush.com/projects/masked-input-plugin/
• http://jherax.github.io/#jqueryfnnumericinput-
• http://firstopinion.github.io/formatter.js/
• и тонны других ...

Здесь вы можете увидеть живое демо одного из предыдущих плагинов:

• http://plnkr.co/edit/VPVokB?p=preview

Если вы хотите безопасно использовать selectionStart, вы можете проверить те элементы, которые его поддерживают (см. атрибуты типа входа )

Реализация

// Fix: failed to read the 'selectionStart' property from 'HTMLInputElement'
// The @fn parameter provides a callback to execute additional code
var _fixSelection = (function() {
    var _SELECTABLE_TYPES = /text|password|search|tel|url/;
    return function fixSelection (dom, fn) {
        var validType = _SELECTABLE_TYPES.test(dom.type),
            selection = {
                start: validType ? dom.selectionStart : 0,
                end: validType ? dom.selectionEnd : 0
            };
        if (validType && fn instanceof Function) fn(dom);
        return selection;
    };
}());

// Gets the current position of the cursor in the @dom element
function getCaretPosition (dom) {
    var selection, sel;
    if ('selectionStart' in dom) {
        return _fixSelection(dom).start;
    } else { // IE below version 9
        selection = document.selection;
        if (selection) {
            sel = selection.createRange();
            sel.moveStart('character', -dom.value.length);
            return sel.text.length;
        }
    }
    return -1;
}

Использование

// If the DOM element does not support `selectionStart`,
// the returned object sets its properties to -1.
var box = document.getElementById("price"),
    pos = getCaretPosition(box);
console.log("position: ", pos);

Вышеприведенный пример можно найти здесь: jsu.fnGetCaretPosition ()