[DOM] Méthode initKeyEvent sur un onKeyPress avec Firefox

**jers85** · 09/01/2008, 16h18

Bonjour à tous !

voilà mon problème, je cherche à mettre automatiquement un texte tapé dans un champ en majuscule (ou inversement en minuscule). Pour cela, j'utilise les évènements clavier avec les keycode. Avec Internet Explorer ça marche très bien, mais avec Firefox, ça ne marche pas (erreur décrite plus bas).

Pour bien comprendre, voici 2 fichiers (html et js) simple :

uppercase.html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>Uppercase</title>
 <script type="text/javaScript" src="uppercase.js" ></script>
  </head>
  <body>
 
  <input  type="text" id="surname"  style="width:150px;position:absolute;left:40px;top:40px; "  
    maxlength="45" size="45" onkeypress="return fwkFilter(event,this,'AlphaUC: -')" />
 
  </body>
</html>

uppercase.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
 
//==============================================================================
//                     KEY CODE (CHARACTER) INPUT FILTER 
//------------------------------------------------------------------------------
// Use this function in the "onKeyPress" event to call this function for 
// each key press by the user
//==============================================================================
function fwkFilter(oEvent, oField, sType)  
{
    if ( oEvent == null )
    {
        alert ( "ERROR on fwkFilter() : No event parameter !" );
        return ;
    }
    if ( oField == null )
    {
        alert ( "ERROR on fwkFilter() : No field parameter !" );
        return ;
    }
 
    if ( sType == null ) return ;
    //fwkSetFieldShallowCheckingStandardColor(oField);
 
    var sOptionalChars = fwkGetOptionalChars(sType);
    var sPureType      = fwkGetPureType(sType);
    var sPureTypeUC    = sPureType.toUpperCase() ;
 
  if ( sPureTypeUC == "ALPHAUC"    ) return fwkAlphaFilter   (oEvent, oField, sOptionalChars, "U" ) ;
    else if ( sPureTypeUC == "ALPHALC"    ) return fwkAlphaFilter   (oEvent, oField, sOptionalChars, "L" ) ;
}
//------------------------------------------------------------------------
function fwkGetOptionalChars(sType)  
{
    if ( sType == null ) return "" ;
    var i = sType.indexOf(":") ;
    if ( i >= 0 ) 
    {
        return sType.substr(i+1) ;
    }
    return "";
}
//------------------------------------------------------------------------
function fwkGetPureType(sType)
{
    if ( sType == null ) return "" ;
    var i = sType.indexOf(":") ;
    if ( i >= 0 ) 
    {
        return sType.substr(0, i) ;
    }
    return sType;    
}
//------------------------------------------------------------------------
// Fonctions de filtrage des caractères saisis pour un champ ALPHABETIQUE PUR
//------------------------------------------------------------------------
function fwkAlphaFilter(oEvent, oField, sOpt, sUpperLower ) 
{
    var iCar = fwkGetKeyCode(oEvent) ; // Caractère saisi
    if ( iCar < 31 ) return true ; 
 
    var iFilteredChar = privateAlphaFilter(iCar, sOpt, sUpperLower ) ;
    if ( iFilteredChar != 0 ) // Char OK
    {
        if ( iFilteredChar != iCar ) 
        {
            //--- Re-Set the Character (can be converted)
            fwkSetKeyCode(oEvent, iFilteredChar )  
        } 
        return true ;
    }
    fwkInvalidChar(oField);
    return false ;
}
//------------------------------------------------------------------------
function privateAlphaFilter(iCar, sOpt, sUpperLower ) 
{
    //--- Lettres majuscules ( A-Z )
    if ( iCar >=  65 && iCar <=  90 ) 
    {
        if ( sUpperLower == "L" ) // Lower Case  
        {
            return iCar + 32;  // Convert
        }
        return iCar ;
    }
    //--- Lettres minuscules ( a-z )
    if ( iCar >=  97 && iCar <= 122 ) 
    {
        if ( sUpperLower == "U" ) // Upper Case 
        {
            return iCar - 32;  // Convert
        }
        return iCar ;
    }
    //--- Lettres accentuées ( à ä â  ï î ñ Ä Â etc... )
    if ( iCar >= 194 )
    {
        return iCar ;
    }
    //--- Caractère optionnel ?
    var sCar = String.fromCharCode(iCar) ;
    if ( sOpt.indexOf(sCar) >= 0 )
    {
        return iCar ;
    }
    //--- Dans tous les autres cas : Caractère refusé     
    return 0 ;
}
//------------------------------------------------------------------------
function fwkGetKeyCode(oEvent)  
{
    if ( window.event )
    {
        //--- Internet Explorer
        window.status = "I.E. : event.keyCode = " + oEvent.keyCode + " / window.event.keyCode = " + window.event.keyCode  ;
        return window.event.keyCode ;
    }
    else
    {
        //--- Mozilla / Firefox
        if ( oEvent.keyCode ) // Ctrl Key ( Backspace, Home, Arrows, ... ) 
        {
            //window.status = "Mozilla/Firefox : keyCode = " + oEvent.keyCode ;
            return 0 ;
        }
        else if ( oEvent.which ) // Character 
        {
            //window.status = "Mozilla/Firefox : which = " + oEvent.which + " / charCode = " + oEvent.charCode ;
            return oEvent.which ;
        }
        return 0;
    }
}
//------------------------------------------------------------------------
function fwkSetKeyCode(oEvent, iNewKeyCode )  
{
    if ( window.event ) //--- Internet Explorer
    {
        window.status = "I.E. : initial keyCode = " + window.event.keyCode  + " / new keyCode = " + iNewKeyCode  ;
        window.event.keyCode = iNewKeyCode ;
    }
    else if ( oEvent.initKeyEvent ) //--- Mozilla / Firefox
    {
        oEvent.initKeyEvent('keypress', true, true, window, false, false, false, false, 0, iNewKeyCode );
    }
}
//------------------------------------------------------------------------
var VG_fwkInvalidCharErrorColor       = "red"; 
var VG_fwkFieldOnError = null ; // Variable Globale pour le timer
function fwkInvalidChar(oField)  
{
    VG_fwkFieldOnError = oField ;
    if ( oField.style.backgroundColor != VG_fwkInvalidCharErrorColor ) // Pour éviter les pb de frappe clavier très rapide
    {
        var sInitialBgColor = oField.style.backgroundColor ;
        //alert("initial BG-Color =" + sInitialBgColor );
        //VG_fwkFieldOnError.style.backgroundColor='red' ;    
        VG_fwkFieldOnError.style.backgroundColor=VG_fwkInvalidCharErrorColor ;
        //window.setTimeout("VG_fwkFieldOnError.style.backgroundColor='white';", 50);
        window.setTimeout("VG_fwkFieldOnError.style.backgroundColor='" + sInitialBgColor + "';", 50);
    }
}

Seulement, sur Firefox, une erreur se produit dont voici le message :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIDOMKeyEvent.initKeyEvent]"  nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)"  location: "JS frame :: file:///C:/Documents%20and%20Settings/jgeant/Bureau/uppercase.js :: fwkSetKeyCode :: line 143"  data: no] Line 0

Ce qui explique que la ligne 143 ne fonctionne pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
oEvent.initKeyEvent('keypress', true, true, window, false, false, false, false, 0, iNewKeyCode );

J'ai essayé plusieurs modifications sur cette fonction avec la doc officielle du DOM mais sans succès

Avez-vous une solution à ce problème ?

J'ai également essayer de le faire avec du CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
.upperCase {
    text-transform: uppercase;
}
 
.lowerCase {
    text-transform: lowercase;
}

mais ça ne change que l'aspect et non la valeur réelle du champ.
Par exemple, si je tape avec le clavier en minuscule "test", j'aurai d'afficher "TEST" mais si je récupère la valeur du champ, elle sera égal à "test". Comment modifier la valeur réelle du champ ?

J'ai aussi testé avec les méthodes toUpperCase() et toLowerCase() mais j'ai des soucis avec Firefox si je tape trop vite le texte et je pense que c'est à oublier.

Merci de m'aider

**jers85** · 10/01/2008, 11h13

Bon finalement je viens de trouver la solution !!

Désolé pour le dérangement mais si ça peut aider d'autres personnes c'est toujours ça de gagner

Alors en fait, il suffisait de créer un nouvel évènement que l'on "dispatch"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function fwkSetKeyCode(oEvent, iNewKeyCode )  
{
    if ( window.event ) //--- Internet Explorer
    {
        window.status = "I.E. : initial keyCode = " + window.event.keyCode  + " / new keyCode = " + iNewKeyCode  ;
        window.event.keyCode = iNewKeyCode ;
    }
    else if ( oEvent.initKeyEvent ) //--- Mozilla / Firefox
    {
        var oNewEvent = document.createEvent("KeyEvents");
        oNewEvent.initKeyEvent('keypress', true, true, window, false, false, false, false, 0, iNewKeyCode );
        oEvent.preventDefault();
        oEvent.target.dispatchEvent(oNewEvent);
  }
}

[DOM] Méthode initKeyEvent sur un onKeyPress avec Firefox

JavaScript

Vue hybride

Discussions similaires

Partager

Partager