1

Tenho uma página que carrega um formulário de contato via Ajax em uma div. Acontece que se eu colocar algum caractere inválido no campo de email, o Chrome me mostra um endereço esquisito vindo do campo.

Por exemplo, se eu colocar dvd@gçmail.com, ele me mostra isso: [email protected] no console.

Coloquei o ç de propósito porque estou fazendo uma validação via JavaScript para detectar o caractere inválido.

Quando coloco [email protected] não acontece nenhum problema. Mas se coloco um ç, o Chrome troca o gmail.com por xn--gmail-yra.com.

Já tentei limpando o cache e nada. O mais curioso é que quando coloco o foco no campo, aparece um autofill como mostra a imagem:

inserir a descrição da imagem aqui

Se eu trocar o type="email" por type="text", o problema não ocorre, mas eu preciso que o input seja type="email".

O input é bem simples:

<input type="email" name="uemail" placeholder="E-mail" style="width: 100%; max-width: 250px; margin: 5px 0;">

Como isso acontece apenas no Chrome, alguém tem alguma ideia de como resolver isso?

Edit

Testei no Chome em duas máquinas diferentes e o resultado foi o mesmo.

11
  • 1
    Verifique se existe esse endereço em chrome://settings/autofill, depois vai em chrome://settings/clearBrowserData na aba Avançado clique em "Preenchimento automático dos dados do formulário" e mande Limpar. Também de uma olhada nesse link support.google.com/chrome/answer/…
    – hugocsl
    Commented 17/04/2018 às 0:26
  • Cara, não resolveu não... O autofill até parou de funcionar, mas continua vindo o mesmo email esquisito, e já limpei os dados que vc indicou. Acho que eu tenho um outro site que usa a mesma coisa e nunca notei problema... vou dar uma testada lá...
    – Sam
    Commented 17/04/2018 às 0:40
  • Ixi! Mesma coisa e eu nunca havia notado isso... vou testar em outro pc, pode ser problema no meu Chrome....
    – Sam
    Commented 17/04/2018 às 0:44
  • 1
    Já faz algum tempo que caracteres especiais e letras acentuadas deixaram de ser virtualmente inválidos nos endereços de internet. Talvez isso seja um bug da implementação do proprio navegador sobre essa tecnologia nos componentes de exibição , e não necessariamente um problema... Commented 17/04/2018 às 2:18
  • 1
    @DiegoRafaelSouza Já encontrei uma solução, vou postar daqui a pouco. Valeu!
    – Sam
    Commented 17/04/2018 às 2:27

1 Resposta 1

-1

Encontrei uma solução nesta resposta do SOen. Embora a resposta seja antiga (2008), funcionou como uma luva.

Eu apenas excluí o trecho abaixo da função porque ele faz o inverso, por isso não é necessário para o caso:

this.ToASCII = function ( domain ) {
...
}

O código completo está no final da resposta.

O que precisa fazer é enviar para a função punycode.ToUnicode(domain) apenas o domínio do email que vem do input pelo parâmetro domain.

Para isso é necessário quebrar o endereço de email para pegar apenas o domínio. Eu fiz assim (exemplo):

// considere o email vindo do input como "nome@gçmail.com"
var email = "nome%40xn--gmail-yra.com"; // o %40 representa a arroba @ codificada
var email_array = email.split("%40");
var email_nome = email_array.shift(); // pego o nome no email
var email_dominio = email_array.pop(); // pego o domínio do email

// converte "xn--gmail-yra.com" para "gçmail.com"
var dominio_real = punycode.ToUnicode(email_dominio);

// agora eu junto nome + domínio
var email_real = email_nome+"@"+dominio_real;

Desta forma eu consigo verificar email com domínio inválido com o JavaScript no Chrome.

Código e teste:

window.onload = function(){

    // considere o email vindo do input como "nome@gçmail.com"
    var email = "nome%40xn--gmail-yra.com"; // o %40 representa a arroba @ codificada
    var email_array = email.split("%40");
    var email_nome = email_array.shift(); // pego o nome no email
    var email_dominio = email_array.pop(); // pego o domínio do email

    // converte "xn--gmail-yra.com" para "gçmail.com"
    var dominio_real = punycode.ToUnicode(email_dominio);

    // agora eu junto nome + domínio
    var email_real = email_nome+"@"+dominio_real;
    console.log("nome%40xn--gmail-yra.com -> "+email_real);
};

//Javascript Punycode converter derived from example in RFC3492.
//This implementation is created by [email protected] and released into public domain
var punycode = new function Punycode() {
    // This object converts to and from puny-code used in IDN
    //
    // punycode.ToASCII ( domain )
    // 
    // Returns a puny coded representation of "domain".
    // It only converts the part of the domain name that
    // has non ASCII characters. I.e. it dosent matter if
    // you call it with a domain that already is in ASCII.
    //
    // punycode.ToUnicode (domain)
    //
    // Converts a puny-coded domain name to unicode.
    // It only converts the puny-coded parts of the domain name.
    // I.e. it dosent matter if you call it on a string
    // that already has been converted to unicode.
    //
    //
    this.utf16 = {
        // The utf16-class is necessary to convert from javascripts internal character representation to unicode and back.
        decode:function(input){
            var output = [], i=0, len=input.length,value,extra;
            while (i < len) {
                value = input.charCodeAt(i++);
                if ((value & 0xF800) === 0xD800) {
                    extra = input.charCodeAt(i++);
                    if ( ((value & 0xFC00) !== 0xD800) || ((extra & 0xFC00) !== 0xDC00) ) {
                        throw new RangeError("UTF-16(decode): Illegal UTF-16 sequence");
                    }
                    value = ((value & 0x3FF) << 10) + (extra & 0x3FF) + 0x10000;
                }
                output.push(value);
            }
            return output;
        },
        encode:function(input){
            var output = [], i=0, len=input.length,value;
            while (i < len) {
                value = input[i++];
                if ( (value & 0xF800) === 0xD800 ) {
                    throw new RangeError("UTF-16(encode): Illegal UTF-16 value");
                }
                if (value > 0xFFFF) {
                    value -= 0x10000;
                    output.push(String.fromCharCode(((value >>>10) & 0x3FF) | 0xD800));
                    value = 0xDC00 | (value & 0x3FF);
                }
                output.push(String.fromCharCode(value));
            }
            return output.join("");
        }
    }

    //Default parameters
    var initial_n = 0x80;
    var initial_bias = 72;
    var delimiter = "\x2D";
    var base = 36;
    var damp = 700;
    var tmin=1;
    var tmax=26;
    var skew=38;
    var maxint = 0x7FFFFFFF;

    // decode_digit(cp) returns the numeric value of a basic code 
    // point (for use in representing integers) in the range 0 to
    // base-1, or base if cp is does not represent a value.

    function decode_digit(cp) {
        return cp - 48 < 10 ? cp - 22 : cp - 65 < 26 ? cp - 65 : cp - 97 < 26 ? cp - 97 : base;
    }

    // encode_digit(d,flag) returns the basic code point whose value
    // (when used for representing integers) is d, which needs to be in
    // the range 0 to base-1. The lowercase form is used unless flag is
    // nonzero, in which case the uppercase form is used. The behavior
    // is undefined if flag is nonzero and digit d has no uppercase form. 

    function encode_digit(d, flag) {
        return d + 22 + 75 * (d < 26) - ((flag != 0) << 5);
        //  0..25 map to ASCII a..z or A..Z 
        // 26..35 map to ASCII 0..9
    }
    //** Bias adaptation function **
    function adapt(delta, numpoints, firsttime ) {
        var k;
        delta = firsttime ? Math.floor(delta / damp) : (delta >> 1);
        delta += Math.floor(delta / numpoints);

        for (k = 0; delta > (((base - tmin) * tmax) >> 1); k += base) {
                delta = Math.floor(delta / ( base - tmin ));
        }
        return Math.floor(k + (base - tmin + 1) * delta / (delta + skew));
    }

    // encode_basic(bcp,flag) forces a basic code point to lowercase if flag is zero,
    // uppercase if flag is nonzero, and returns the resulting code point.
    // The code point is unchanged if it is caseless.
    // The behavior is undefined if bcp is not a basic code point.

    function encode_basic(bcp, flag) {
        bcp -= (bcp - 97 < 26) << 5;
        return bcp + ((!flag && (bcp - 65 < 26)) << 5);
    }

    // Main decode
    this.decode=function(input,preserveCase) {
        // Dont use utf16
        var output=[];
        var case_flags=[];
        var input_length = input.length;

        var n, out, i, bias, basic, j, ic, oldi, w, k, digit, t, len;

        // Initialize the state: 

        n = initial_n;
        i = 0;
        bias = initial_bias;

        // Handle the basic code points: Let basic be the number of input code 
        // points before the last delimiter, or 0 if there is none, then
        // copy the first basic code points to the output.

        basic = input.lastIndexOf(delimiter);
        if (basic < 0) basic = 0;

        for (j = 0; j < basic; ++j) {
            if(preserveCase) case_flags[output.length] = ( input.charCodeAt(j) -65 < 26);
            if ( input.charCodeAt(j) >= 0x80) {
                throw new RangeError("Illegal input >= 0x80");
            }
            output.push( input.charCodeAt(j) );
        }

        // Main decoding loop: Start just after the last delimiter if any
        // basic code points were copied; start at the beginning otherwise. 

        for (ic = basic > 0 ? basic + 1 : 0; ic < input_length; ) {

            // ic is the index of the next character to be consumed,

            // Decode a generalized variable-length integer into delta,
            // which gets added to i. The overflow checking is easier
            // if we increase i as we go, then subtract off its starting 
            // value at the end to obtain delta.
            for (oldi = i, w = 1, k = base; ; k += base) {
                    if (ic >= input_length) {
                        throw RangeError ("punycode_bad_input(1)");
                    }
                    digit = decode_digit(input.charCodeAt(ic++));

                    if (digit >= base) {
                        throw RangeError("punycode_bad_input(2)");
                    }
                    if (digit > Math.floor((maxint - i) / w)) {
                        throw RangeError ("punycode_overflow(1)");
                    }
                    i += digit * w;
                    t = k <= bias ? tmin : k >= bias + tmax ? tmax : k - bias;
                    if (digit < t) { break; }
                    if (w > Math.floor(maxint / (base - t))) {
                        throw RangeError("punycode_overflow(2)");
                    }
                    w *= (base - t);
            }

            out = output.length + 1;
            bias = adapt(i - oldi, out, oldi === 0);

            // i was supposed to wrap around from out to 0,
            // incrementing n each time, so we'll fix that now: 
            if ( Math.floor(i / out) > maxint - n) {
                throw RangeError("punycode_overflow(3)");
            }
            n += Math.floor( i / out ) ;
            i %= out;

            // Insert n at position i of the output: 
            // Case of last character determines uppercase flag: 
            if (preserveCase) { case_flags.splice(i, 0, input.charCodeAt(ic -1) -65 < 26);}

            output.splice(i, 0, n);
            i++;
        }
        if (preserveCase) {
            for (i = 0, len = output.length; i < len; i++) {
                if (case_flags[i]) {
                    output[i] = (String.fromCharCode(output[i]).toUpperCase()).charCodeAt(0);
                }
            }
        }
        return this.utf16.encode(output);
    };

    //** Main encode function **

    this.encode = function (input,preserveCase) {
        //** Bias adaptation function **

        var n, delta, h, b, bias, j, m, q, k, t, ijv, case_flags;

        if (preserveCase) {
            // Preserve case, step1 of 2: Get a list of the unaltered string
            case_flags = this.utf16.decode(input);
        }
        // Converts the input in UTF-16 to Unicode
        input = this.utf16.decode(input.toLowerCase());

        var input_length = input.length; // Cache the length

        if (preserveCase) {
            // Preserve case, step2 of 2: Modify the list to true/false
            for (j=0; j < input_length; j++) {
                case_flags[j] = input[j] != case_flags[j];
            }
        }

        var output=[];


        // Initialize the state: 
        n = initial_n;
        delta = 0;
        bias = initial_bias;

        // Handle the basic code points: 
        for (j = 0; j < input_length; ++j) {
            if ( input[j] < 0x80) {
                output.push(
                    String.fromCharCode(
                        case_flags ? encode_basic(input[j], case_flags[j]) : input[j]
                    )
                );
            }
        }

        h = b = output.length;

        // h is the number of code points that have been handled, b is the
        // number of basic code points 

        if (b > 0) output.push(delimiter);

        // Main encoding loop: 
        //
        while (h < input_length) {
            // All non-basic code points < n have been
            // handled already. Find the next larger one: 

            for (m = maxint, j = 0; j < input_length; ++j) {
                ijv = input[j];
                if (ijv >= n && ijv < m) m = ijv;
            }

            // Increase delta enough to advance the decoder's
            // <n,i> state to <m,0>, but guard against overflow: 

            if (m - n > Math.floor((maxint - delta) / (h + 1))) {
                throw RangeError("punycode_overflow (1)");
            }
            delta += (m - n) * (h + 1);
            n = m;

            for (j = 0; j < input_length; ++j) {
                ijv = input[j];

                if (ijv < n ) {
                    if (++delta > maxint) return Error("punycode_overflow(2)");
                }

                if (ijv == n) {
                    // Represent delta as a generalized variable-length integer: 
                    for (q = delta, k = base; ; k += base) {
                        t = k <= bias ? tmin : k >= bias + tmax ? tmax : k - bias;
                        if (q < t) break;
                        output.push( String.fromCharCode(encode_digit(t + (q - t) % (base - t), 0)) );
                        q = Math.floor( (q - t) / (base - t) );
                    }
                    output.push( String.fromCharCode(encode_digit(q, preserveCase && case_flags[j] ? 1:0 )));
                    bias = adapt(delta, h + 1, h == b);
                    delta = 0;
                    ++h;
                }
            }

            ++delta, ++n;
        }
        return output.join("");
    }

    this.ToUnicode = function ( domain ) {

        var domain_array = domain.split(".");
        var out = [];
        for (var i=0; i < domain_array.length; ++i) {
            var s = domain_array[i];
            out.push(
                s.match(/^xn--/) ?
                punycode.decode(s.slice(4)) :
                s
            );
        }
        return out.join(".");
    }
};

Código minimizado:

var punycode=new function Punycode(){this.utf16={decode:function(input){var output=[],i=0,len=input.length,value,extra;while(i<len){value=input.charCodeAt(i++);if((value&0xF800)===0xD800){extra=input.charCodeAt(i++);if(((value&0xFC00)!==0xD800)||((extra&0xFC00)!==0xDC00))throw new RangeError("UTF-16(decode): Illegal UTF-16 sequence");value=((value&0x3FF)<<10)+(extra&0x3FF)+0x10000;};output.push(value);} return output;},encode:function(input){var output=[],i=0,len=input.length,value;while(i<len){value=input[i++];if((value&0xF800)===0xD800)throw new RangeError("UTF-16(encode): Illegal UTF-16 value");if(value>0xFFFF){value-=0x10000;output.push(String.fromCharCode(((value>>>10)&0x3FF)|0xD800));value=0xDC00|(value&0x3FF);};output.push(String.fromCharCode(value));};return output.join("");}};var initial_n=0x80,initial_bias=72,delimiter="\x2D",base=36,damp=700,tmin=1,tmax=26,skew=38,maxint=0x7FFFFFFF;function decode_digit(cp){return cp-48<10?cp-22:cp-65<26?cp-65:cp-97<26?cp-97:base;};function encode_digit(d,flag){return d+22+75*(d<26)-((flag!=0)<<5);};function adapt(delta,numpoints,firsttime){var k;delta=firsttime?Math.floor(delta/damp):(delta>>1);delta+=Math.floor(delta/numpoints);for(k=0;delta>(((base-tmin)*tmax)>>1);k+=base){delta=Math.floor(delta/(base-tmin));};return Math.floor(k+(base-tmin+1)*delta/(delta+skew));};function encode_basic(bcp,flag){bcp-=(bcp-97<26)<<5;return bcp+((!flag&&(bcp-65<26))<<5);};this.decode=function(input,preserveCase){var output=[],case_flags=[],input_length=input.length,n,out,i,bias,basic,j,ic,oldi,w,k,digit,t,len;n=initial_n;i=0;bias=initial_bias;basic=input.lastIndexOf(delimiter);if(basic<0)basic=0;for(j=0;j<basic;++j){if(preserveCase)case_flags[output.length]=(input.charCodeAt(j)-65<26);if(input.charCodeAt(j)>=0x80)throw new RangeError("Illegal input >= 0x80");output.push(input.charCodeAt(j));};for(ic=basic>0?basic+1:0;ic<input_length;){for(oldi=i,w=1,k=base;;k+=base){if(ic>=input_length)throw RangeError ("punycode_bad_input(1)");digit=decode_digit(input.charCodeAt(ic++));if(digit>=base)throw RangeError("punycode_bad_input(2)");if(digit>Math.floor((maxint-i)/w))throw RangeError("punycode_overflow(1)");i+=digit*w;t=k<=bias?tmin:k>=bias+tmax?tmax:k-bias;if(digit<t)break;if(w>Math.floor(maxint/(base-t)))throw RangeError("punycode_overflow(2)");w*=(base-t);};out=output.length+1;bias=adapt(i-oldi,out,oldi===0);if(Math.floor(i/out)>maxint-n)throw RangeError("punycode_overflow(3)");n+=Math.floor(i/out);i%=out;if(preserveCase)case_flags.splice(i,0,input.charCodeAt(ic-1)-65<26);output.splice(i,0,n);i++;};if(preserveCase){for(i=0,len=output.length;i<len;i++){if(case_flags[i])output[i]=(String.fromCharCode(output[i]).toUpperCase()).charCodeAt(0);}};return this.utf16.encode(output);};this.encode=function(input,preserveCase){var n,delta,h,b,bias,j,m,q,k,t,ijv,case_flags;if(preserveCase)case_flags=this.utf16.decode(input);input=this.utf16.decode(input.toLowerCase());var input_length=input.length;if(preserveCase)for(j=0;j<input_length;j++){case_flags[j]=input[j]!=case_flags[j];};var output=[];n=initial_n;delta=0;bias=initial_bias;for(j=0;j<input_length;++j){if(input[j]<0x80)output.push(String.fromCharCode(case_flags?encode_basic(input[j],case_flags[j]):input[j]));};h=b=output.length;if(b>0)output.push(delimiter);while(h<input_length){for(m=maxint,j=0;j<input_length;++j){ijv=input[j];if(ijv>=n&&ijv<m)m=ijv;};if(m-n>Math.floor((maxint-delta)/(h+1)))throw RangeError("punycode_overflow (1)");delta+=(m-n)*(h+1);n=m;for(j=0;j<input_length;++j){ijv=input[j];if(ijv<n)if(++delta>maxint) return Error("punycode_overflow(2)");if(ijv==n){for(q=delta,k=base;;k+=base){t=k<=bias?tmin:k>=bias+tmax?tmax:k-bias;if(q<t)break;output.push(String.fromCharCode(encode_digit(t+(q-t)%(base-t),0)));q=Math.floor((q-t)/(base-t));};output.push(String.fromCharCode(encode_digit(q,preserveCase&&case_flags[j]?1:0)));bias=adapt(delta,h+1,h==b);delta=0;++h;}} ++delta,++n;} return output.join("");};this.ToUnicode=function(domain){var domain_array=domain.split("."),out=[];for(var i=0;i<domain_array.length;++i){var s=domain_array[i];out.push(s.match(/^xn--/)?punycode.decode(s.slice(4)):s);}return out.join(".");}}
7
  • cara foi mal ontem, até vi que vc tinha postado a pergunta, mas minha noiva tinha acabado de chegar e nem deu para ver a pergunta direito, depois quando fui ver vc já tinha apagado... Espero que já tenha resolvido, qq coisa que eu puder ajudar me da um toque depois. []´s
    – hugocsl
    Commented 18/04/2018 às 11:59
  • 1
    Tranquilo, consegui resolver. Era incompatibilidade com o jQuery. O Safari, tanto do desktop quanto do iPhone iOS 6 (antigo mesmo) não aceitam .append() ou .html() do jQuery. Resolvi usando JS puro mesmo.
    – Sam
    Commented 18/04/2018 às 15:15
  • dá uma olhada no código dessa minha resposta e me diga porque não funciona na aplicação do AP. pt.stackoverflow.com/questions/293265/…
    – user60252
    Commented 23/04/2018 às 11:21
  • @LeoCaracciolo Aparentemente não tem porque não funcionar. Esse AP é meio doido. Tá fazendo um monte de pergunta com a mesma coisa e não resolve nada.
    – Sam
    Commented 23/04/2018 às 13:43
  • Blz, experimentei com console.log e vou verificar e não aparece lá no console do navegador. Da outra resposta aparece. Como faço para aparecer no console? edita lá.
    – user60252
    Commented 23/04/2018 às 15:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .