javascript - habilitar - selectionStart/selectionEnd on input type="number" ya no está permitido en Chrome

habilitar javascript en chrome en windows

Question

Nuestra aplicación usa selectionStart en los campos de entrada para determinar si se mueve automáticamente al campo siguiente / anterior al presionar las teclas de flecha (es decir, cuando la selección se encuentra al final del texto y el usuario presiona la flecha derecha hacia donde nos movemos) el siguiente campo, de lo contrario)

Chrome ahora evita que selectionStart se use donde type = "number". Ahora arroja la excepción:

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

Ver siguiente:

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

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

¿Hay alguna forma de determinar la ubicación del cursor en un campo de entrada de tipo = "número"?

Answer 1

¿No podemos simplemente invertir la verificación del elemento para simplemente incluir los elementos que son compatibles, como este:

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

en lugar de esto:

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

Answer 2

Actualmente, los únicos elementos que permiten la selección de texto de forma segura son:

<input type="text|search|password|tel|url"> como se describe en:
whatwg: selectionStart attribute .

También puede leer la documentación de la interfaz HTMLInputElement para ver de cerca los elementos de entrada.

Para superar este "problema" de forma segura, lo mejor por ahora es tratar con un <input type="text"> y aplicar una máscara / restricción que acepte solo números. Existen algunos complementos que satisfacen el requisito:

• http://digitalbush.com/projects/masked-input-plugin/
• http://jherax.github.io/#jqueryfnnumericinput-
• http://firstopinion.github.io/formatter.js/
• y toneladas de otros ...

Aquí puede ver una demostración en vivo de uno de los complementos anteriores:

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

Si desea utilizar selectionStart forma segura, puede verificar los elementos que lo soportan (consulte los atributos de tipo de entrada )

Implementación

// 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;
}

Uso

// 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);

El ejemplo anterior se puede encontrar aquí: jsu.fnGetCaretPosition()

Answer 3

Como solución alternativa, el type="tel" entrada type="tel" proporciona una funcionalidad muy similar a type="number" en Chrome y no tiene esta limitación (como lo señala Patrice).

Answer 4

Esto estaba sucediendo para nosotros mientras usábamos el complemento jQuery Numeric, versión 1.3.x, por lo que ajustamos selectionStart y selectionEnd con un try...catch{} pudimos suprimir el error.

Fuente: https://github.com/joaquingatica/jQuery-Plugins/commit/a53f82044759d29ff30bac698b09e3202b456545

Answer 5

Hay una manera de lograr esto en Chrome (y tal vez en otros navegadores, pero Chrome es el gran delincuente aquí). Use window.getSelection() para recuperar el objeto de selección de la entrada actual y luego pruebe extender la selección hacia atrás (o hacia adelante) y ver si el valor toString() de la selección cambia. Si no lo hace, el cursor se encuentra al final de la entrada y puede pasar a su siguiente entrada. Si lo hace, debe invertir la operación para deshacer la selección.

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
}

Obtuve esta idea de esta respuesta SO: https://.com/a/24247942

Answer 6

He encontrado una solución simple (probada en Chrome) para setSelectionRange() . Simplemente puede cambiar el type a text antes de usar setSelectionRange() y luego cambiarlo de nuevo a number .

Aquí hay un ejemplo simple con jquery que posicionará el símbolo de intercalación en la posición 4 de la entrada numérica siempre que haga clic en la entrada (agregue más de 5 números en la entrada para ver el comportamiento)

plunker

Answer 7

Recibí este error en un sitio web angularjs.

Creé un atributo de datos personalizado en una entrada y también estaba usando ng-blur (con $ event).

Cuando llamé a mi devolución de llamada, estaba intentando acceder al valor ''id-datos'', como:

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

Y debería haber sido así:

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

No parece haber demasiado sobre este error en ninguna parte, así que lo dejo aquí.

Answer 8

Sé que esta respuesta llega demasiado tarde, pero aquí hay un complemento que implementa selectionStart para todos los tipos de elementos, para la mayoría de los navegadores (viejos y nuevos):

https://github.com/adelriosantiago/caret

Lo he actualizado para tratar el problema type="number" usando la respuesta de @ncohen.

Answer 9

Si bien el problema con los eventos obsoletos para este tipo de campo de formulario puede seguir siendo relevante, hasta donde puedo ver, este tipo de campo se puede escuchar con el evento "cambiar", como de costumbre.

Llegué a este artículo aquí mientras buscaba una respuesta al problema de eventos para este tipo de campo, pero mientras lo probaba, descubrí que simplemente podía confiar en el evento de "cambio" como se mencionó.

Answer 10

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#do-not-apply . La razón probable de que la selección se haya inhabilitado para las entradas de tipo número es que en algunos dispositivos, o en algunas circunstancias (por ejemplo, cuando la entrada se ha presentado como una list breve), es posible que no haya un símbolo de intercalación. La única solución que encontré fue cambiar el tipo de entrada a texto (con el patrón apropiado para restringir la entrada). Todavía estoy buscando una forma de hacerlo sin cambiar el tipo de entrada y publicaré una actualización cuando encuentre algo.