Script non funge su CHROME

**djjunior** · 31-03-2017, 15:27

Carissimi,
sto utilizzando questo script per obbligare all'inserimento testo di una text-area, cioè
solo 25 caratteri per riga e solo 2 righe, premetto che funziona correttamente su mozilla ma niente ne su IE che CHROME

codice:

<script type="text/javascript">
function checkRows(oField, oKeyEvent) {
var nKey = (oKeyEvent || /* old IE */ window.event || /* check is not supported! */ { keyCode: 38 }).keyCode,


// qui il numero massimo di caratteri per riga:
nCols = 25,
// qui il numero massimo di righe:
nRows = 2,


nSelS = oField.selectionStart, nSelE = oField.selectionEnd,
sVal = oField.value, nLen = sVal.length,


nBackward = nSelS >= nCols ? nSelS - nCols : 0,
nDeltaForw = sVal.substring(nBackward, nSelS).search(new RegExp("\\n(?!.{0," + String(nCols - 2) + "}\\n)")) + 1,
nRowStart = nBackward + nDeltaForw,
aReturns = (sVal.substring(0, nSelS) + sVal.substring(nSelE, sVal.length)).match(/\n/g),
nRowEnd = nSelE + nRowStart + nCols - nSelS,
sRow = sVal.substring(nRowStart, nSelS) + sVal.substring(nSelE, nRowEnd > nLen ? nLen : nRowEnd),
bKeepCols = nKey === 13 || nLen + 1 < nCols || /\n/.test(sRow) || ((nRowStart === 0 || nDeltaForw > 0 || nKey > 0) && (sRow.length < nCols || (nKey > 0 && (nLen === nRowEnd || sVal.charAt(nRowEnd) === "\n"))));


return (nKey !== 13 || (aReturns ? aReturns.length + 1 : 1) < nRows) && ((nKey > 32 && nKey < 41) || bKeepCols);
}
</script>

Ma su chrome non rispetta ne i 25 caratteri e poi si estende pure su 3 righe come posso fare, potete aiutarmi?
Grazie
G.

**KillerWorm** · 31-03-2017, 15:42

Ciao, giusto per fare qualche prova e cercare di capire, come richiami quella funzione?

EDIT: ok lascia stare, ho già visto, faccio qualche prova e ti dico...

**djjunior** · 31-03-2017, 15:47

ecco:

codice:

<textarea onkeypress="return checkRows(this, event);" onpaste="return false;" name="titolo" cols="50" rows="2" ></textarea>

Grazie

**KillerWorm** · 31-03-2017, 20:19

Il problema sta nella proprietà keyCode dell'oggetto KeyboardEvent. Tale proprietà è deprecata e, cosa rilevante in questo caso, restituisce risultati inconsistenti sui diversi browser.

Da quel che ho capito, il sistema si basa sul fatto che keyCode restituisce 0 (su FF) quando si è premuto un tasto relativo ad un carattere "stampabile" (cioè quelli che non sono tasti funzionali come Invio, Canc, Shift, ecc.). Viene quindi usata questa condizione per determinare, appunto, il tipo di tasto premuto. Su altri browser, come Chrome, invece viene restituito un codice carattere per qualsiasi tasto premuto e questo genera il problema.

Ho provato a cercare qualche altra proprietà che potesse sostituire questa, per come è utilizzata su quel sistema, ma non ho trovato molto. Ci sono chiaramente diverse altre proprietà simili (vedi documentazione di KeyboardEvent), ma per ottenere un risultato valido bisogna modificare opportunamente il codice.

Se non risolvi prima posso giusto fare qualche altra prova ma non garantisco nulla.

**djjunior** · 01-04-2017, 09:25

Grazie KillerWorm per il tuo aiuto.... comunque non necessariamente devo utilizzare questo script, se ne conosci altri compatibili con tutti i browser che abbiano le stesse funzionalità va bene ugualmente.
grazie
G.

**KillerWorm** · 01-04-2017, 11:35

Bene, ho appena buttato via quello script

Ho cercato inizialmente di rattopparlo ma mi son reso conto che il meccanismo di funzionamento fa comunque acqua, per cui ho preferito scartarlo a priori.
Già nello script originale ci sono delle limitazioni di funzionamento e delle piccole falle, a parte la non-compatibilità tra i diversi browser.
1- il fatto che non si possa utilizzare il copia-incolla potrebbe essere abbastanza limitativo e fastidioso.
2- il sistema si rompe se si pigia "canc" quando il cursore è a fine riga mentre nella riga successiva è presente un testo che, sommato tra le due righe, supera il limite impostato per le colonne. Le due righe infatti si portano su un'unica riga, fregandosene del limite impostato.

Ho cercato in giro se ci fosse qualche altro script ma ho trovato ben poco.

Giusto per tenermi in esercizio ho provato a tirare su qualcosa da zero.
Qui un esempio:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
  </head>
  <body>
  
    <textarea id="areatesto" name="titolo" cols="50" rows="2" ></textarea>

    <script type="text/javascript">
      function TestoLimitato(textarea, colonne, righe){
        var me = this;
        if (colonne<0 || righe<1) return;
        function verificaTesto(){
          RegExp('^.{0,'+(colonne)+'}(\n.{0,'+(colonne)+'}){0,'+(righe-1)+'}$','g').test(textarea.value)
            ? me.value = textarea.value
            : textarea.value = me.value
          ;
        }
        me.value = '';
        textarea.addEventListener('input', verificaTesto);
        verificaTesto();
      }
      
      new TestoLimitato(areatesto, 25, 2);
    </script>
    
  </body>
</html>

Giusto qualche precisazioni.

Si basa sull'evento input, che è supportato dai browser odierni (da IE9 in poi, giusto per chiarire). Non credo abbia senso avere retrocompatibilità per browser archeologici.

Ho usato una impostazione oop. In sostanza puoi applicare i limiti ad una textarea, creando semplicemente un nuovo oggetto con new TestoLimitato(ElementoTextArea, LimiteColonne, LimiteRighe);

Il sistema controlla direttamente il valore della textarea tramite regexp. Se il nuovo testo supera il test, allora è normalmente inserito, altrimenti no. Sostanzialmente se non supera il test, sarà considerato il valore precedente.

E' possibile inserire il testo come meglio si crede, digitandoci dentro o copiaincollando.

Non ho fatto troppissime prove. Nel caso, fai tu qualche prova, vedi se funziona, se può andarti bene e fammi sapere.
Buon proseguimento.

**djjunior** · 01-04-2017, 12:58

Grazie KillerWorm,
testato con mozilla, chrome e va alla grande...
Ma testato con IE versione 11 non va purtroppo....
Thankkkks

**KillerWorm** · 01-04-2017, 13:57

Ma testato con IE versione 11 non va purtroppo....

Ok. E' comunque strano, io l'ho testato su IE11 con win10, e funziona.
Giusto per capire, che SO usi?

E' possibile che non supporti l'uso di addEventListener o che non riconosca i nomi degli elementi DOM o, male che vada, l'evento input.

Prova a verificare se ti restituisce qualche errore sulla console web (F12 da tastiera per aprirla, quindi click sulla scheda "Console"). Fammi sapere.

**ciro78** · 01-04-2017, 16:32

chiuso per violazione di regolamento. non sei nuovo. dovresti sapere come funziona.

Discussione: Script non funge su CHROME

Strumenti discussione

Ricerca discussione

Visualizza

Script non funge su CHROME

Permessi di invio