Est-il une solution pour la saisie de texte maxlength ne fonctionne pas sous Safari?

Dans safari, version 8.0 (10600.1.25.1) sur OS X 10.10.1 si vous disposez des éléments suivants:

<input type="text" maxlength="5" >

Le remplir avec 5 personnages, puis positionnez le curseur (avec la souris ou le clavier) quelque part au milieu de la chaîne (pas au début ou à la fin), en tapant de causer plus de la saisie de caractères.

Plus précisément, il agit comme il est d'ignorer les caractères après le signe lors du calcul de la "longueur" de la chaîne, de sorte que si le signe était à l'origine placé à la position 1, 9 plus de caractères sera enterable.

Ce n'est pas reproductible sur le dernier chrome ou firefox.

L'effet peut être vu sur cette page: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_maxlength

Suis-je à l'aide de maxlength mal? Est-ce une chose connue avec les solutions de contournement? J'ai googlé un peu avec pas de joie...

C'est corrigé dans safari 9.0, entre temps j'ai collé avec le toto21 la solution pour maxlength dans safari 8.
Bonne nouvelle, merci pour le partage. 🙂

OriginalL'auteur MHarris | 2014-12-05

  1. 7

    Essayez ceci:
    HTML :

    <input name="mytest" type="text">

    Jquery :

    $('input[name="mytest"]').keypress(function() {
    if (this.value.length >= 5) {
        return false;
    }
});
    Cela provoque un bug dans Firefox, une fois le nombre maximum de caractères a été atteint, vous ne pouvez pas utiliser l'onglet ou la combinaison de touches [CTRL+A] et supprimer/retour arrière ne fonctionne pas. Il s'arrête toutes les actions de imprimable et non des caractères imprimables.
    En effet ! - Donc utiliser keydown comme ceci : $('input[name="mytest"]').keydown(function(e) { //alert(e.keyCode); si (e.mot de code != 8 &&.de la valeur.longueur >= 5) { return false; } });
    Mieux : tester si le navigateur est safari et la version est < 9

    OriginalL'auteur toto21

  2. 0

    J'ai eu un problème similaire, après beaucoup de recherches, le cerveau de rayonnages et de l'aide de ce site, c'est ce que j'ai fait. Il empêche tout sélectionner [CTRL+A], la touche retour arrière/suppression de bugs de Firefox. Fonctionne très bien pour moi. Pourraient travailler pour quelqu'un d'autre aussi. Excuse l'espace de noms global de la pollution. 

    function getBrowserInfo() {
//function that returns an array with browser name at index 0, version at index 1
var N=navigator.appName, ua=navigator.userAgent, tem;
var M=ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) {
M[2]= tem[1];
}
M = M ? [M[1], M[2]]: [N, navigator.appVersion, '-?'];
return M;
}
function crossBrowserify() {
//checks for browsers that lack support and adds the handler leaving compatible browsers like Firefox unaffected
var browserInfoArr = getBrowserInfo(),
browser = browserInfoArr[0],
browserVersion = browserInfoArr[1];
if(browser.toLowerCase() == "safari" && browserVersion >= 8 && browserVersion < 9) {
$(document).on("keypress", "input[type='text']", preventExcessCharacters);
}
}
function preventExcessCharacters(e) {
//fix for a bug in Mac OSX Safari 8
var $this = $(this),    //caching element to prevent performance issues due to frequent DOM access
mxLength = $this.attr("maxlength");
if(mxLength){
if (e.which < 0x20) {
//e.which < 0x20, then it's not a printable character
//e.which === 0 - Not a character
return;     //Do nothing
}
if (this.value.length == mxLength) {
e.preventDefault();
} else if (this.value.length > mxLength) {
//Maximum exceeded
//fix for copy paste bug
this.value = this.value.substring(0, mxLength);
}
}
}
//set handler if browser lacks support
crossBrowserify();

    OriginalL'auteur Larrydx