selectionStart / selectionEnd on input type = “number” більше не дозволяється в Chrome

Наша програма використовує selectionStart у полях введення, щоб визначити, чи слід автоматично пересувати користувача в наступне / попереднє поле, коли вони натискають клавіші зі стрілками (тобто, коли виділення знаходиться в кінці тексту, а користувач натискає стрілку вправо, до якої ми переходимо наступне поле, інакше)

Chrome тепер забороняє використовувати selectionStart там, де type = "number". Тепер він видає виняток:

Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection.

Дивіться наступне:

https://codereview.chromium.org/100433008/#ps60001

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#do-not-apply

Чи є спосіб визначити розташування каретки у полі введення type = "number"?

Вибір дозволений лише за допомогою тексту / пошуку, URL-адреси, телефону та пароля . Найімовірнішою причиною того, що вибір було вимкнено для входів типу номера, є те, що на деяких пристроях або за певних обставин (наприклад, коли вхід подано як короткий list), можливо, немає каретки. Єдиним рішенням, яке я знайшов, було змінити тип введення на текст (з відповідним шаблоном для обмеження введення). Я все ще шукаю спосіб зробити, не змінюючи тип введення, і опублікую оновлення, коли щось знайду.

Я знайшов просте обхідне рішення (перевірене на Chrome) для setSelectionRange(). Ви можете просто змінити значення typeна textперед використанням, setSelectionRange()а потім повернути його на number.

Ось простий приклад з jquery, який буде розміщувати каретку на позиції 4 у введенні числа, коли ви клацаєте на введенні (додайте більше 5 цифр у вхід, щоб побачити поведінку)

плунжер

На даний момент єдиними елементами, які дозволяють безпечно виділяти текст, є:

<input type="text|search|password|tel|url">як описано в:
whatwg: selectionStart атрибут .

Ви також можете прочитати документацію до інтерфейсу 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 ()

Це відбувалося з нами під час використання числового плагіна jQuery, версія 1.3.x, тому, обертаючи selectionStartі за selectionEndдопомогою a, try...catch{}ми змогли придушити помилку.

Джерело: https://github.com/joaquingatica/jQuery-Plugins/commit/a53f82044759d29ff30bac698b09e3202b456545

Як навколо, type="tel"тип введення забезпечує дуже подібну функціональність, як type="number"у Chrome, і не має цього обмеження (як зазначив Патріс).

Є один спосіб досягти цього в 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

ми не можемо просто змінити перевірку елемента, щоб просто включити підтримувані елементи, наприклад:

if (deviceIsIOS &&
    targetElement.setSelectionRange &&
    (
        targetElement.type === 'text' ||
        targetElement.type === 'search' ||
        targetElement.type === 'password' ||
        targetElement.type === 'url' ||
        targetElement.type === 'tel'
    )
) {

замість цього:

if (deviceIsIOS && 
    targetElement.setSelectionRange && 
    targetElement.type.indexOf('date') !== 0 && 
    targetElement.type !== 'time' && 
    targetElement.type !== 'month'
) {

Хоча проблема із застарілими подіями для цього типу поля форми все ще може бути актуальною, наскільки я бачу, цей тип поля можна прослуховувати разом із подією "change", як зазвичай.

Я потрапив до цієї статті тут, шукаючи відповіді на проблему подій для цього типу поля, але, перевіряючи її, я виявив, що я можу просто покластись на подію "зміни", як згадано.

Я отримав цю помилку на веб-сайті angularjs.

Я створив власний атрибут даних на вході, а також використовував ng-blur (з $ event).

Коли був викликаний мій зворотний дзвінок, я намагався отримати доступ до значення 'data-id', наприклад:

var id = $event.target.attributes["data-id"]

І це мало бути так:

var id = $event.target.attributes["data-id"].value

Здається, ніде не надто багато про цю помилку, тому я залишаю це тут.

Я знаю, що ця відповідь приходить занадто пізно, але ось плагін, який реалізує selectionStart для всіх типів елементів для більшості браузерів (старого та нового):

https://github.com/adelriosantiago/caret

Я оновив його для вирішення type="number"проблеми, використовуючи відповідь @ncohen.

Вирішити Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection.наступним чином:

var checkFocus = false;
var originalValue = "";
$(document).ready(function() {
  $("input").focus(function() {
    var that = this;
    if ($('#' + $(this).context.id).attr("type") == "text") {
      setTimeout(function() {
        if (that.selectionStart != null || that.selectionEnd != null) {
          that.selectionStart = that.selectionEnd = 10000;
        }
      }, 0);
    } else if ($('#' + $(this).context.id).attr("type") == "number") {
      if (checkFocus) {
        moveCursorToEnd($('#' + $(this).context.id), $(this).context.id);
        checkValue($('#' + $(this).context.id))
        checkFocus = false;
      } else {
        $('#' + $(this).context.id).blur();
      }
    }
  });
});

function FocusTextBox(id) {
  checkFocus = true;
  document.getElementById(id).focus();
}

function checkValue(input) {
  if ($(input).val() == originalValue || $(input).val() == "") {
    $(input).val(originalValue)
  }
}

function moveCursorToEnd(input, id) {
  originalValue = input.val();
  input.val('');
  document.getElementById(id).focus();
  return originalValue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<button onclick="FocusTextBox('textid')">
   <input id="textid" type="number" value="1234" > 
</button>

Слідкуйте за помилковими позитивними даними в Angular, якщо ви використовуєте режим тестування пристрою Chrome.

Отже, це, очевидно, Chrome, а не справжній iPhone, але помилка все одно піднімається, оскільки _platform.IOSповертає true, а потім setSelectionRangeне вдається.

Це Angular - але подібні проблеми можуть існувати і в інших фреймворках / середовищах.