Récemment, j'ai rencontré un problème JS dans IE8. J'ai besoin d'implémenter (IE8) pour utiliser Pinyin ou First Letters pour récupérer le contenu dans Select. Le Combobox d'origine ne pouvait prendre en charge la saisie et la recherche de caractères chinois, et maintenant je dois l'améliorer. Je vais maintenant enregistrer la méthode d'implémentation étape par étape. La fonction est simple et il peut y avoir des bogues et des lacunes pour la référence d'apprentissage. (Cet article ne fournit que l'apprentissage et la sauvegarde d'idées. Dans la situation réelle, elle doit être utilisée en mode de compatibilité IE8 ou IE, de sorte que d'autres navigateurs ne sont pas pris en compte)
Structure du répertoire:
test
| --js
| --index.html
Ajouter la page d'index
index.html
<! Doctype html> <html> <éadf> <meta charset = "utf-8" /> <title> </ title> <script type = "text / javascript" src = "js / auto-assoclete.js"> </ script> <script type = "text / javascript"> </ script> </ head> <pody> <puty type = "Text =" id = "txtdis" id = "city"> <option value = "1"> beijing </ option> <option value = "2"> shanghai </ option> <option value = "3"> guangzhou </ option> <option value = "4"> shenzhen </ option> <option value = "5"> chongqing </opoption> <option value = "6"> Tianjin </ / option> Value = "7"> Shenyang </ Option> <Option Value = "8"> Nanjing </ Option> <Option Value = "9"> Wuhan </ Option> <Option Value = "10"> Changchun </ Option> <Option Value = "11"> CHENGDU </ Option> <Option Value = "12"> Dalian </ Option> <option Value = "13"> Value = "14"> Qingdao </ Option> <Option Value = "15"> ajinan </ option> <Option Value = "16"> XIAMEN </ Option> <Option Value = "17"> FUZHOU </ OPTION >> <Option Value = "18"> Xi'an </ Option> <option Value = "19"> Changs </ Option> <option = "20"> harbin </ SELECT> </ Body> <option Value = "20"> HARBINE </ SELECT> </ Body> <option Value = "20"> HARBINE </ SELECT> </html>
Effet: commencez à cacher la zone de liste déroulante de Select. Lorsque vous cliquez sur la zone de texte d'entrée, affichez-la en bas de la zone d'entrée. Une fois la sélection terminée, masquez la sélection.
Implémentation JS:
Si une page a plusieurs endroits pour implémenter de telles fonctions, vous devez utiliser la réflexion orientée objet et réutiliser le code autant que possible. Nous devons personnaliser une collection comme AP.
Auto-Aomplete.js
Fonction Map () {/ ** Array pour le stockage des touches (utilisé pour la traversée) * / this.keys = new Array (); / ** stocker les données * / this.data = new object (); / ** * Mettez une paire de valeurs de clé * @param {String} key * @param {object} value * / this.put = function (key, value) {if (this.data [key] == null) {this.keys.push (key); } this.data [key] = valeur; }; / ** * Obtenez la valeur correspondant à une clé * @param {string} key * @return {object} value * / this.get = function (key) {return this.data [key]; }; / ** * Supprimer une paire de valeurs clés * @param {string} key * / this.remove = function (key) {this.keys.remove (key); this.data [key] = null; }; / ** * Traverser la carte et exécuter la fonction de traitement * * @param {fonction} fonction de fonction de rappel (clé, valeur, index) {..} * / this.each = function (fn) {if (typeof fn! = 'Function') {return; } var len = this.keys.length; pour (var i = 0; i <len; i ++) {var k = this.keys [i]; fn (k, this.data [k], i); }}; / ** * Obtenez un tableau de valeurs de clé (similaire à l'entrée de Java ()) * @return Array of Key-Value Object {key, value} * / this.entrys = function () {var len = this.keys.length; var entrées = nouveau tableau (len); pour (var i = 0; i <len; i ++) {entrées [i] = {key: this.keys [i], valeur: this.data [i]}; } retourne les entrées; }; / ** * Déterminez si la carte est vide * / this.isempty = function () {return this.keys.length == 0; }; / ** * Obtenez le nombre de paires de valeurs clés * / this.size = function () {return this.keys.length; }; / ** * Réécrivez ToString * / this.toString = function () {var s = "{"; for (var i = 0; i <this.keys.length; i ++, s + = ',') {var k = this.keys [i]; s + = k + "=" + this.data [k]; } s + = "}"; retour s; }; } Array.prototype.remove = function (s) {for (var i = 0; i <this.length; i ++) {if (s == this [i]) this.splice (i, 1); }}Maintenant, nous devons écrire un fichier d'entrée de chargement de programme, qui est utilisé pour transmettre l'entrée et sélectionner des objets, puis effectuer une série d'opérations telles que la liaison des événements.
var AutoCompleMap = new Map (); // conteneur de composants, qui est pratique pour appeler lorsqu'il est piloté par des événements, et prend en charge la gestion multi-composants var slipfleg = "_"; // Séparateur / ** * Zone de texte, la boîte déroulante est combinée dans un composant d'achèvement automatique * @param {objet} TxToBj Text Box Object * @param {Object} selectObj Drop-down Box Object * @param {int} selectTice Drop-Down Box * selectSize, selectLength) {this.cacheContainer = new Array (); // Conteneur de cache, utilisé pour mettre en cache le contenu dans l'option de cacheContainer lorsque la page vient de charger. This.init = function () {this.initcache (); // Données de cache, cachez les données d'option pour CacheContainer this.initcss (); // initialiser CSS et masquer Sélectionnez ce.RegisterEvent (); // Enregistrer l'événement this.setSelectIdPosition (); // Définissez l'emplacement du composant actuel de sélection // pour faciliter l'appel lors de la conduite des événements du composant. Dans le même temps, il prend en charge la gestion multi-composants AutoCompleMap.put (txtoBj.id + selectObj.id, this); // Une fois l'interface actualisée, écrivez la valeur de texte de la zone déroulante de l'agence directe dans la zone de texte var selectIndex = selectObj.selectedIndex; if (selectIndex> 0) // Le premier contenu est généralement [veuillez sélectionner]. Sinon, modifiez> 0 en> = 0 txtoBj.value = selectObj.options [selectIndex] .Text; } // Données de cache et données d'option de cache à cacheContainer this.initcache = function () {var select_options = selectObj.options; if (select_options == null || select_options.length == 0) {return; } this.cacheContainer = []; pour (var i = 0; i <Select_Options.Length; i ++) {this.cacheContainer [i] = select_options [i] .text + Splitfleg + select_options [i] .Value; }} this.initcss = function () {selectObj.style.display = "Aucun"; selectObj.style.position = "Absolute"; selectObj.style.zindex = 2; selectObj.style.width = selectLength + "px"; selectObj.Multiple = "multiple"; txtObj.Style.Width = selectLength - 5 + "px"; } this.registerEvent = function () {// Événement de boîte de drop-down selectObj.ondblclick = this.doubleclickevent; selectObj.onKeyUp = this.keyupEvent; selectObj.OnBlur = this.OnBlurevent; selectObj.onfocus = this.onfoCUsevent; // Événement de zone de texte txtoBj.onfocus = this.onfocusevent; txtObj.onblur = this.onBluevent; txtObj.onKeyUp = this.txtoBjKeyUpEvent; } this.setselectIdPosition = function () {var position = this.findPosition (txtObj); selectObj.style.left = position [0] + "px"; selectObj.style.top = position [3] + 3 + "px"; } this.findPosition = function (oelement) {var x2 = 0; var y2 = 0; var width = oelement.offsetWidth; var height = oelement.offsetheight; if (typeof (oelement.offsetparent)! = 'undefined') {for (var posx = 0, posy = 0; oelement; oelement = oelement.offsetparent) {posx + = oelement.offsetleft; posy + = oelement.offsetTop; } x2 = posx + largeur; y2 = posy + hauteur; retour [posx, posy, x2, y2]; } else {x2 = oelement.x + largeur; y2 = oelement.y + hauteur; return [oelement.x, oelement.y, x2, y2]; }} // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- = AutoCompleMap.get (txtObj.id + selectObj.id); if (event.KeyCode == 13) {event.ReturnValue = false; var srcelem = document.activeElement; // obtient l'objet actuel var testval = srcelem.id; if (testVal == selectObj.id) {AutoCer.DoubleClicKevent (); }}} / ** * Événement de mise au point * / this.onBlurevent = function () {var srcelem = document.activeElement; var testVal = srcelem.id; if (testVal! = selectObj.id && testVal! = txtObj.id) {// Si la zone d'entrée actuelle ou la liste de sélection n'est pas focalisée, selectObj.style.display = "Aucun"; // masquer la liste de sélection}} / ** * Événement de mise au point * / this.onfoCUsevent = function () {var AutoCerletel = AutoCompleMap.get (txtObj.id + selectObj.id); AutoChat.SetselectIdPosition (); var srcelem = document.activeElement; var testVal = srcelem.id; if (testVal == selectObj.id || testVal == txtObj.id) {// Focus sur l'objet actuel if (txtoBj.value.length! = 0) {// Lorsqu'il y a des caractères dans la zone d'entrée, aucune opération n'est effectuée; } var selectIdLength = selectObj.options.length; if (selectIdLength> selectSize) {selectObj.size = selectSize; } else {selectObj.size = selectIdLength; } selectObj.style.display = "bloc"; }} var mytimeout = null; / ** * La souris de la zone de texte se concentre sur l'événement de version, définissez un temporisateur, exécutez la fonction à chaque fois spécifique, interrogez les données de la liste de sélection correspondantes dans la zone d'entrée et affichez * / this.txtoBjKeyUpevent = function () {var auto-completet = auto-completemap.get (txtoBj.id + selectObj.id); if (event.KeyCode == 40) {// Cliquez sur la touche de flèche du clavier dans la zone d'entrée, et il n'est pas nécessaire de rechercher à ce moment. L'événement de recherche est déclenché lors de la saisie var srcelem = document.activeElement; var testVal = srcelem.id; if (testVal == txtObj.id) {selectObj.focus (); if (selectObj.options.length> = 1) selectObj.options [0] .Selected = true; } retour; } if (AutoChatle.Mytimeout! = null) {// Effacer l'événement d'exécution temporaire SET ClearTimeout (Auto-Aomplete.Mytimeout); } Auto-Aomplete.Mytimeout = setTimeout (AutoCer.Doajax, 200); } // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- gens // effacer les options d'origine AutoClete.ClearAlLOPTIONS (); AutoChat.SetselectIdPosition (); var inputstr = txtoBj.Value; Var Arrays = Assumer AutoClelete.CompleInput (InputStr); // correspond aux données qui remplissent les conditions de requête if (arrays == null || arrays.length == 0) {selectObj.style.display = "Aucun"; retour; } selectObj.style.display = "bloc"; for (var i = 0; i <arrays.length; i ++) {var optionParams = arrays [i] .split (SplitFleg); var opt = nouvelle option (); opt.Text = optionParams [0]; opt.value = optionParams [1]; selectObj.add (OPT); } if (arrays.length> selectSize) {selectObj.size = selectSize; } else {selectObj.size = arrays.length; }} / ** * Effacer les options d'origine * / this.clearalloptions = function () {// effacer les options d'origine var nl = selectObj.options.length; while (nl> 0) {selectObj.Remove (selectObj.options.length - 1); nl = selectObj.options.length; }} // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- this.compareInput = function (inputstr) {if (this.cacheContainer.length == 0) {return; } inputstr = inputstr.replace (/ (^ [/ s] *) / g, ""); // Retirez la chaîne vierge dans l'avant InputStr = this.deleteSpecialSpace (InputStr); // Supprime la chaîne vide spéciale if (inputstr == null || inputstr.length == 0) {return this.cacheContainer; } inputStr = DisableSpecialCharacter (InputStr); // Traitement de caractères spécial var resultArray = new Array (); var k = 0; var selectText = ""; pour (var i = 0; i <this.cacheContainer.length; i ++) {selectText = (this.cacheContainer [i] .split (SplitFleg) [0]). Remplace (/ (^ [/ s] *) / g, ""); selectText = this.deleteSpecialSpace (SelectText); if (Comparerules (inputStr, selectText)) {// correspond à la règle ResultArray [k] = this.cacheContainer [i]; k ++; }} return UniQueArray (resultArray); } / ** * supprimer la chaîne de blanc spéciale * / this.deleSpecialSpace = function (srcstr) {var temp = ""; pour (var i = 0; i <srcstr.length; i ++) {var charstr = srcstr.charat (i); // Espace spécial sur l'interface Unicode = 160, cet espace n'est ni pleine largeur ni demi-largeur if (charstr.charcodeat (0) == 160) {continuant; } temp + = charstr; } Retour Temp; }} / ** * @param {String} Caractères InputStr qui doivent être filtrés * Traitement de caractères spécial * / fonction DisableSpecialCharacter (InputStr) {inputStr = inputstr.replace (new regexp ("////", 'g'), "////"); inputstr = inputstr.replace (new regexp ("//.", 'g'), "//."); inputstr = inputstr.replace (new regexp ("// ^", 'g'), "// ^"); inputstr = inputstr.replace (new regexp ("// {", 'g'), "// {"); inputstr = inputstr.replace (new regexp ("// [", 'g'), "// ["); inputStr = inputstr.replace (new regexp ("// (", 'g'), "// ("); inputStr = inputstr.replace (new regexp ("// |", 'g'), "// |"); inputStr = inputstr.replace (new regexp ("//]", 'g'), "//]"); entréer = entrée = entrée = nouveau (new) Regexp ("//]", 'g'), "//]"); inputstr = inputstr.replace (new regexp ("// *", 'g'), "// *"); inputstr = inputstr.replace (new regexp ("// +", 'g'), "// +"); inputstr = inputstr.replace (new regexp ("//?", 'g'), "//?"); return inputstr; } / ** * Règles de correspondance * @param {String} Corteur de boîte d'entrée InputStr, correspond à la condition * @param {string} selectText est assorti avec le texte * / Fonction Comparérules (InputStr, selectText) {// correspond aux caractères chinois returntext.indexof (inputstr)! = -1; } / ** * Filter Données en double * @param {objet} Arr Result Array * / fonction uniquearray (arr) {if (arr == null || arr.length == 0) {return arr; } return arr.reverse (). JOIN (","). Match (/(@^ ,++)(?!.*/ 1) / ig) .reverse (); } / ** * Ajouter une fonction personnalisée à exécuter sur la fonction d'origine * @param {objet} Func Loading Fonction * / fonction addLoadevent (func) {var oldonload = window.onLot; if (typeof window.onload! = 'function') {window.onload = func; } else {window.onload = function () {oldonload (); func (); }}}}Présentation de l'outil JS pour convertir les caractères chinois en pinyin
pinyinhanzi.js
/** * Man conversion to pinyin tool js */ var key2code = { 65: "a", 66: "b", 67: "c", 68: "d", 69: "e", 70: "f", 71: "g", 72: "h", 73: "i", 74: "j", 75: "k", 76: "l", 77: "m", 78: "n", 79: "o", 80: "p", 81: "q", 82: "r", 83: "s", 84: "t", 85: "u", 86: "v", 87: "w", 88: "x", 89: "y", 90: "z", 49: "1", 50: "2", 51: "3", 52: "4", 53: "5", 54: "6", 55: "7", 56: "8", 57: "9", 48: "0"}; var spell = {0xb0a1: "a", 0xb0a3: "Ai", 0xb0b0: "an", 0xb0b9: "ang", 0xb0bc: "ao", 0xb0c5: "ba", 0xb0d7: "bai" "bao", 0xB1AD: "bei", 0xB1BC: "ben", 0xB1C0: "beng", 0xB1C6: "bi", 0xB1DE: "bian", 0xB1EA: "biao", 0xB1EE: "bie", 0xB1F2: "bin", 0xB1F8: "bing", 0xB2A3: "bo", 0xb2b8: "bu", 0xb2c1: "Ca", 0xb2c2: "Cai", 0xb2cd: "Can", 0xb2d4: "CANG", 0xb2d9: "Cao" "chai", 0xB2F3: "chan", 0xB2FD: "chang", 0xB3AC: "chao", 0xB3B5: "che", 0xB3BB: "chen", 0xB3C5: "cheng", 0xB3D4: "chi", 0xB3E4: "chong", 0xB3E9: "chou", 0xB3F5: "Chu", 0xb4a7: "chuai", 0xb4a8: "chuan", 0xb4af: "chuang", 0xb4b5: "chui", 0xb4b3: "chun" 0xb4d6: "Cu", 0xb4da: "Cuan", 0xb4dd: "Cui", 0xb4e5: "Cun", 0xb4e8: "Cuo", 0xb. "dao", 0xb5c2: "de", 0xb5c5: "Deng", 0xb5cc: "di", 0xb5df: "dian", 0xb5ef: "diao", 0xb5f8: "die", 0xb6a1: "ding", 0xb6aa: "diu", 0xb6ab: "dong", 0xb6aa: "diu", 0xb6ab: "dong", 0xb6aa: "diu", 0xb6ab: "dong", 0xb6a: "diu", 0xb6ab: "Dong" 0xB6BC: "du", 0xB6CB: "duan", 0xB6D1: "dui", 0xB6D5: "dun", 0xB6DE: "duo", 0xB6EA: "e", 0xB6F7: "en", 0xB6F8: "er", 0xB7A2: "fa", 0xB7AA: "fan", 0xB7BB: "fang", 0xB7C6: "fei", 0xB7D2: "fen", 0xB7E1: "feng", 0xB7F0: "fo", 0xB7F1: "fou", 0xB7F2: "fu", 0xB8C1: "ga", 0xB8C3: "gai", 0xB8C9: "gan", 0xb8d4: "gang", 0xb8dd: "gao", 0xb8e7: "ge", 0xb8f8: "gei", 0xb8f9: "gen", 0xb8fb: "gen", 0xb9a4: "gong", 0xb9b3: "gou", 0xb9bc: "gu", 0xb9ce: "gua", 0xb9bc: "gu", 0xb9ce: "Gua", 0xb9bc: "gu", 0xb9ce: "Gua", 0xb9bc: "gu", 0xb9ce: "GUA" 0xB9D4: "guai", 0xB9D7: "guan", 0xB9E2: "guang", 0xB9E5: "gui", 0xB9F5: "gun", 0xB9F8: "guo", 0xB9FE: "ha", 0xBAA1: "hai", 0xBAA8: "han", 0xBABB: "hang", 0xBABE: "hao", 0xBAC7: "he", 0xBAD9: "hei", 0xBADB: "hen", 0xBADF: "heng", 0xBAE4: "hong", 0xBAED: "hou", 0xBAF4: "hu", 0xBBA8: "hua", 0xBB1: "hua", 0xBBB6: "hua", 0xBBC4: "huang", 0xBBD2: "hui", 0xBBE7: "hun", 0xBBED: "huo", 0xBBF7: "ji", 0xBCCE: "jia", 0xBCDF: "jian", 0xBDA9: "jiang", 0xBDB6: "jia", 0xBDD2: "jie", 0xBDED: "jin", 0xBEA3: "jing", 0xBEBC: "jiong", 0xBEBE: "jiu", 0xBECF: "ju", 0xBEE8: "juan", 0xBEEF: "jue", 0xBEF9: "jun", 0xBFA6: "ka", 0xBFAA: "Kai", 0xbfaf: "kan", 0xbfb5: "kang", 0xbfbc: "kao", 0xbfc0: "ke", 0xbfcf: "ken", 0xbfcf: "ken", 0xbfd3: "keng", 0xbfd5: "kong", 0xbfd9: "ken", 0xbfd5: "kong", 0xbfd9: "Ken" "Ku", 0xbfe4: "kua", 0xbfe9: "kuai", 0xbfed: "kuan", 0xbfef: "kuang", 0xbff7: "kui" 0xc0b6: "lan", 0xc0c5: "Lang", 0xc0cc: "Lao", 0xc0d5: "le", 0xc0e5: "LEI", 0xc0e2: "Leng" 0xC1C3: "liao", 0xC1D0: "lie", 0xC1D5: "lin", 0xC1E1: "ling", 0xC1EF: "liu", 0xC1FA: "long", 0xC2A5: "lou", 0xC2AB: "lu", 0xC2BF: "lv", 0xC2CD: "luan", 0xC2D3: "lue", 0xC2D5: "lun", 0xC2DC: "luo", 0xC2E8: "ma", 0xC2F1: "mai", 0xC2F7: "man", 0xC3A2: "meng", 0xC3A8: "mao", 0xC3B4: "me", 0xC3B5: "mei", 0xc3c5: "Men", 0xc3c8: "Meng", 0xc3d0: "mi", 0xc3de: "mian", 0xc3e7: "miao", 0xc3ef: "Mie", 0xc3f1: "min" 0xc4b1: "mou", 0xc4b4: "mu", 0xc4c3: "na", 0xc4ca: "nai", 0xc4d3: "nan", 0xc4d2: "Nang" 0xc4dc: "neng", 0xc4dd: "ni", 0xc4e8: "nian", 0xc4ef: "niang", 0xc4f1: "niao", 0xc4f3: "nie", 0xc4fa: "nin" "nong", 0xC5AB: "nu", 0xC5AE: "nv", 0xC5AF: "nuan", 0xC5B0: "nue", 0xC5B2: "nuo", 0xC5B6: "o", 0xC5B7: "ou", 0xC5BE: "pa", 0xC5C4: "pai", 0xC5CA: "pan", 0xc5d2: "pang", 0xc5d7: "pao", 0xc5de: "pei", 0xc5e7: "Pen", 0xc5e9: "Peng", 0xc5f7: "pi", 0xc6aa: "pian", 0xc6ae: "Piao", 0xc6b2: "Pie" 0xc6b9: "ping", 0xc6c2: "po", 0xc6cb: "pu", 0xc6da: "qi", 0xc6fe: "qia", 0xc7a3: "qian", 0xc7b9: "Qiang" "qin", 0xC7E0: "qing", 0xC7ED: "qiong", 0xC7EF: "qiu", 0xC7F7: "qu", 0xC8A6: "quan", 0xC8B1: "que", 0xC8B9: "qun", 0xC8BB: "ran", 0xC8BF: "rang", 0xC8C4: "Rao", 0xc8c7: "re", 0xc8c9: "Ren", 0xc8d3: "Reng", 0xc8d5: "Ri", 0xc8e3: "Rong" "Run", 0xc8f4: "ruo", 0xc8f6: "sa", 0xc8f9: "sai", 0xc8fd: "san", 0xc9a3: "Sang", 0xc9a6: "sao" 0xC9B8: "shai", 0xC9BA: "shan", 0xC9CA: "shang", 0xC9D2: "shao", 0xC9DD: "she", 0xC9E9: "shen", 0xC9F9: "sheng", 0xCAA6: "shi", 0xCAD5: "shou", 0xCADF: "shu", 0xcba2: "shua", 0xcba4: "shuai", 0xcba8: "shuan", 0xcbaa: "shuang", 0xcbb5: "shui", 0xcbb1: "shun", 0xcbb5: "shuo" "su", 0xCBE1: "suan", 0xCBE4: "sui", 0xCBEF: "sun", 0xCBF2: "suo", 0xCBFA: "ta", 0xCCA5: "tai", 0xCCAE: "tan", 0xCC0: "tang", 0xCCD: "tao", 0xCCD8: "te", 0xCCD9: "Teng", 0xccdd: "ti", 0xccc: "Tian", 0xccf4: "Tiao", 0xccf9: "Tie", 0xccfc: "Ting", 0xcda8: "Tong", 0xcdb5: "tou", 0xcdb9: "tu", 0xcdc4: 0xcdc6: "Tui" "Tun", 0xcdcf: "tuo", 0xcdda: "Wa", 0xcde1: "Wai", 0xcde3: "wan", 0xcdf4: "wang", 0xcdfe: "wei", 0xcec1: "wen", 0xcec: "weng", 0xcece: "wo", 0xcec: "weng", 0xcece: "wo", 0xcec: "Weng", 0xCECE 0xcef4: "xi", 0xcfb9: "xia", 0xcfc6: "xian", 0xcfe0: "xiang", 0xcff4: "xiang", 0xcf4: "Xiao", 0xd0a8: "Xie", 0xd0bd: "Xin", 0xd0c7: "Xing", 0xd0d6: "Xiong", 0xd0dd: "xiu", 0xd0e6: "Xu", 0xd0f9: "Xuan", 0xd1a5: "xue", 0xd1ab: "xun", 0xd1b9: "ya 0xD2AC: "ye", 0xD2BB: "yi", 0xD2F0: "yin", 0xD3A2: "ying", 0xD3B4: "yo", 0xD3B5: "yong", 0xD3C4: "you", 0xD3D9: "yu", 0xD4A7: "yuan", 0xD4BB: "yue", 0xd4c5: "yun", 0xd4d1: "za", 0xd4d4: "zai", 0xd4db: "zan", 0xd4df: "zang", 0xd4e2: "zao", 0xd4f0: "Ze" "zeng", 0xD4FA: "zha", 0xD5AA: "zhai", 0xD5B0: "zhan", 0xD5C1: "zhang", 0xD5D0: "zhao", 0xD5DA: "zhe", 0xD5E4: "zhen", 0xD5F4: "zheng", 0xD6A5: "Zhi", 0xd6d0: "Zhong", 0xd6db: "Zhou", 0xd6e9: "Zhu", 0xd7a5: "Zhua", 0xd7a7: "Zhua", 0xd7a8: "Zhuan" 0xd7bb: "zhun", 0xd7bd: "zhuo", 0xd7c8: "zi", 0xd7d7: "zong", 0xd7de: "zou", 0xd7e2: "zu", 0xd7ea: "zuan" "Zuo"}; var SpellArray = new Array (); var pn = ""; fonction pinyin (char) {if (! char.charcodeat (0) || char.charcodeat (0) <1328) return char; if (SpellArray [char.CharCodeat (0)]) return SpellArray [char.Charcodeat (0)] EXECScript ("Asccode = hex (asc (/" "+ char +" / "))", "vbscript"); ASCCODE = EVAL ("0X" + ASCCODE); if (! (Asccode> 0xb0a0 && Asccode <0xd7f3)) return char; pour (var i = asccode; (! spell [i] && i> 0);) i--; return sort [i]; } function toPinyin(str) { var pStr = "" for (var i = 0; i < str.length; i++) { if (str.charAt(i) == "/n") pStr += "<br>" else pStr += "<ruby style='ruby-align:center'> " + str.charAt(i) + " <rt>" + pinyin(str.charAt(i)) + "</rt> </brose>" // else pstr + = pinyin (str.charat (i)) + ""} return pstr; } fonction topinyInOnly (str) {var pstr = "" for (var i = 0; i <str.length; i ++) {if (str.charat (i) == "/ n") pstr + = "<br>" else pstr + = pinyin (str.charat (i)); // pstr + = "" + pinyin (str.charat (i)); // else pstr + = pinyin (str.charat (i)) + ""} return pstr; } fonction topinyinshengmu (str) {var pstr = "" for (var i = 0; i <str.length; i ++) {if (str.charat (i) == "/ n") pstr + = ""; else pstr + = pinyin (str.charat (i)). charat (0); // else pstr + = pinyin (str.charat (i)) + ""} return pstr; } fonction pinyinsort (a, b) {var rvalue = 0 pour (var i = 0; i <a.Length; i ++) {var Pina = pinyin (a.charat (i)) var pinb = pinyin (b.charat (i)) if (rvalue = Pina> pinb? 1: pina <pinb? -1: 0) Break} return rvalue} Afficher la copie simple Affichage des fragments de code dérivés de mes fragments de code sur le code <! Doctype html> <html> <éadf> <meta charset = "utf-8"> <itle> </ title> <script type = "Text / javascrip src = "js / pinyinhanzi.js"> </ script> <script type = "text / javascript"> // Règles personnalisées Comparérules de fonction (inputStr, selectText) {// correspond aux caractères chinois et pinyin return SelectText.Indexof (inputstr)! = -1 || topinyinshengmu (selectText) .Indexof (inputstr)! = -1 || topinyInOnly (SelectText) .Indexof (inputstr)! = -1; } addLoadevent (func); fonction func () {var textoBj = document.getElementById ("txtDisplay"); var cityobj = document.getElementById ("ville"); VAR ATOCOPLET = NOUVEAU ATCOSION (TextObj, CityObj, 10, 300); AutoChatle.Init (); } </ script> </ head> <body> <input type = "text" id = "txtDisplay" /> <select id = "city"> <option value = "1"> beijing </ option> <option value = "2"> shanghai </ option> <option value = "3"> guangzhou </opoption> <option value = "5"> chongqQing </ option> Value = "6"> Tianjin </ Option> <Option Value = "7"> Shenyang </ Option> <Option Value = "8"> Nanjing </ Option> <Option Value = "9"> Wuhan </ Option> <Option Value = "10"> Changchun </ Option> <option Value = "11"> CHENGDU </ Option> <option Value = "12"> DALIAN </ Option> value = "13"> hangzhou </ option> <option value = "14"> qingdao </ option> <option value = "15"> Jinan </ option> <option value = "16"> xiamen </ option> <option value = "17"> fuzhou </ option> <option value = "18"> xi'an </ option> <option value = "19"> changsha </ option> Value = "20"> Harbin </ Option> </ SELET> </ Body> </Html>Remarque: cette version a des bogues et une incompatibilité avec d'autres navigateurs (sauf iii).
Ce qui précède est les connaissances pertinentes qui vous ont été présentées sur JS Implémentation de la fonction de récupération de Pinyin de support Combobox sur IE8. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!