当前位置: 移动技术网 > IT编程>开发语言>JavaScript > js 获取中文拼音,Select自动匹配字母获取值的代码

js 获取中文拼音,Select自动匹配字母获取值的代码

2019年07月29日  | 移动技术网IT编程  | 我要评论
复制代码 代码如下:

<script type="text/javascript">
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"
};
</script>
<script language=javascript>
var spell = {0xb0a1:"a", 0xb0a3:"ai", 0xb0b0:"an", 0xb0b9:"ang", 0xb0bc:"ao", 0xb0c5:"ba", 0xb0d7:"bai", 0xb0df:"ban", 0xb0ee:"bang", 0xb0fa:"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", 0xb2de:"ce", 0xb2e3:"ceng", 0xb2e5:"cha", 0xb2f0:"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", 0xb4ba:"chun", 0xb4c1:"chuo", 0xb4c3:"ci", 0xb4cf:"cong", 0xb4d5:"cou", 0xb4d6:"cu", 0xb4da:"cuan", 0xb4dd:"cui", 0xb4e5:"cun", 0xb4e8:"cuo", 0xb4ee:"da", 0xb4f4:"dai", 0xb5a2:"dan", 0xb5b1:"dang", 0xb5b6:"dao", 0xb5c2:"de", 0xb5c5:"deng", 0xb5cc:"di", 0xb5df:"dian", 0xb5ef:"diao", 0xb5f8:"die", 0xb6a1:"ding", 0xb6aa:"diu", 0xb6ab:"dong", 0xb6b5:"dou", 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:"geng", 0xb9a4:"gong", 0xb9b3:"gou", 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", 0xbbb1:"huai", 0xbbb6:"huan", 0xbbc4:"huang", 0xbbd2:"hui", 0xbbe7:"hun", 0xbbed:"huo", 0xbbf7:"ji", 0xbcce:"jia", 0xbcdf:"jian", 0xbda9:"jiang", 0xbdb6:"jiao", 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", 0xbfd3:"keng", 0xbfd5:"kong", 0xbfd9:"kou", 0xbfdd:"ku", 0xbfe4:"kua", 0xbfe9:"kuai", 0xbfed:"kuan", 0xbfef:"kuang", 0xbff7:"kui", 0xc0a4:"kun", 0xc0a8:"kuo", 0xc0ac:"la", 0xc0b3:"lai", 0xc0b6:"lan", 0xc0c5:"lang", 0xc0cc:"lao", 0xc0d5:"le", 0xc0d7:"lei", 0xc0e2:"leng", 0xc0e5:"li", 0xc1a9:"lia", 0xc1aa:"lian", 0xc1b8:"liang", 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:"mang", 0xc3a8:"mao", 0xc3b4:"me", 0xc3b5:"mei", 0xc3c5:"men", 0xc3c8:"meng", 0xc3d0:"mi", 0xc3de:"mian", 0xc3e7:"miao", 0xc3ef:"mie", 0xc3f1:"min", 0xc3f7:"ming", 0xc3fd:"miu", 0xc3fe:"mo", 0xc4b1:"mou", 0xc4b4:"mu", 0xc4c3:"na", 0xc4ca:"nai", 0xc4cf:"nan", 0xc4d2:"nang", 0xc4d3:"nao", 0xc4d8:"ne", 0xc4d9:"nei", 0xc4db:"nen", 0xc4dc:"neng", 0xc4dd:"ni", 0xc4e8:"nian", 0xc4ef:"niang", 0xc4f1:"niao", 0xc4f3:"nie", 0xc4fa:"nin", 0xc4fb:"ning", 0xc5a3:"niu", 0xc5a7:"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", 0xc6b4:"pin", 0xc6b9:"ping", 0xc6c2:"po", 0xc6cb:"pu", 0xc6da:"qi", 0xc6fe:"qia", 0xc7a3:"qian", 0xc7b9:"qiang", 0xc7c1:"qiao", 0xc7d0:"qie", 0xc7d5:"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", 0xc8d6:"rong", 0xc8e0:"rou", 0xc8e3:"ru", 0xc8ed:"ruan", 0xc8ef:"rui", 0xc8f2:"run", 0xc8f4:"ruo", 0xc8f6:"sa", 0xc8f9:"sai", 0xc8fd:"san", 0xc9a3:"sang", 0xc9a6:"sao", 0xc9aa:"se", 0xc9ad:"sen", 0xc9ae:"seng", 0xc9af:"sha", 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", 0xcbad:"shui", 0xcbb1:"shun", 0xcbb5:"shuo", 0xcbb9:"si", 0xcbc9:"song", 0xcbd1:"sou", 0xcbd4:"su", 0xcbe1:"suan", 0xcbe4:"sui", 0xcbef:"sun", 0xcbf2:"suo", 0xcbfa:"ta", 0xcca5:"tai", 0xccae:"tan", 0xccc0:"tang", 0xcccd:"tao", 0xccd8:"te", 0xccd9:"teng", 0xccdd:"ti", 0xccec:"tian", 0xccf4:"tiao", 0xccf9:"tie", 0xccfc:"ting", 0xcda8:"tong", 0xcdb5:"tou", 0xcdb9:"tu", 0xcdc4:"tuan", 0xcdc6:"tui", 0xcdcc:"tun", 0xcdcf:"tuo", 0xcdda:"wa", 0xcde1:"wai", 0xcde3:"wan", 0xcdf4:"wang", 0xcdfe:"wei", 0xcec1:"wen", 0xcecb:"weng", 0xcece:"wo", 0xced7:"wu", 0xcef4:"xi", 0xcfb9:"xia", 0xcfc6:"xian", 0xcfe0:"xiang", 0xcff4:"xiao", 0xd0a8:"xie", 0xd0bd:"xin", 0xd0c7:"xing", 0xd0d6:"xiong", 0xd0dd:"xiu", 0xd0e6:"xu", 0xd0f9:"xuan", 0xd1a5:"xue", 0xd1ab:"xun", 0xd1b9:"ya", 0xd1c9:"yan", 0xd1ea:"yang", 0xd1fb:"yao", 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", 0xd4f4:"zei", 0xd4f5:"zen", 0xd4f6:"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:"zhuai", 0xd7a8:"zhuan", 0xd7ae:"zhuang", 0xd7b5:"zhui", 0xd7bb:"zhun", 0xd7bd:"zhuo", 0xd7c8:"zi", 0xd7d7:"zong", 0xd7de:"zou", 0xd7e2:"zu", 0xd7ea:"zuan", 0xd7ec:"zui", 0xd7f0:"zun", 0xd7f2:"zuo"}
var spellarray = new array()
var pn = ""
/*for (var i=0xb0a1; i<0xd7fc; i++)
{
if (spell[i]) pn = spell[i]
execscript("char=chr(\""+i+"\")", "vbscript")
spellarray[char.charcodeat(0)] = pn
}*/
function 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<0xd7fc)) return char;
for (var i=asccode; (!spell[i] && i>0);) i--
return spell[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></ruby>"
//else pstr += pinyin(str.charat(i)) + " "
}
return pstr
}
function 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)) ;
//else pstr += pinyin(str.charat(i)) + " "
}
return pstr
}
function 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
}
function pinyinsort(a, b)
{
var rvalue = 0
for (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
}
</script>
<textarea id=kevin cols=100 rows=10>小狗收藏贴</textarea><br>
<button onclick="test.innerhtml = topinyin(kevin.innertext)">转换</button>
<button onclick="test.innerhtml = topinyinshengmu(kevin.innertext)">转换sm</button>
<button onclick="test.innerhtml = topinyinonly(kevin.innertext)">仅拼音</button>
<button onclick="test.innerhtml = kevin.innertext.split('').sort(pinyinsort).join('')">排序</button>
<div id=test style="font-size:16px;"></div>
select选择,支持中文
#先选择select,按下键盘字母,option根据所输入字母自动选择匹配的中文,如果要重新选择,按space键盘
改变option顺序
<select id="sel" onkeydown="showoptions2(this)" onfocus="inp='';">
<option value=1>中国</option>
<option value=1>北京</option>
<option value=1>北京1北京</option>
<option value=1>北京1南京</option>
<option value=1>北京2</option>
<option value=1>北京3</option>
<option value=1>上海</option>
<option value=1>天津</option>
<option value=1>天津人口</option>
<option value=1>人口</option>
<option value=1>人们</option>
<option value=1>人民</option>
</select>
不改变option顺序
<select id="sel" onkeydown="showoptions(this)" onfocus="inp='';">
<option value=1>中国</option>
<option value=1>北京</option>
<option value=1>北京1北京</option>
<option value=1>北京1南京</option>
<option value=1>北京2</option>
<option value=1>北京3</option>
<option value=1>上海</option>
<option value=1>天津</option>
<option value=1>天津人口</option>
<option value=1>人口</option>
<option value=1>人们</option>
<option value=1>人民</option>
</select>
<script type='text/javascript'>
var inp = "";
function showoptions(obj){
if(event.keycode==32){
inp ="";
return;
}
var tmp = inp;
tmp += key2code[event.keycode]?key2code[event.keycode]:"";
var somenodelist = obj.getelementsbytagname('option');
var index = -1;
for(var i=0;i<somenodelist.length;i++){
var sm = topinyinshengmu(somenodelist[i].innerhtml);
if(sm.indexof(tmp)==0){
index = i;
break;
}
}
if(index>=0){
obj.selectedindex = index;
inp = tmp;
}
}
function showoptions2(obj){
if(event.keycode==32){
inp ="";
return;
}
var tmp = inp;
tmp += key2code[event.keycode]?key2code[event.keycode]:"";
var somenodelist = obj.getelementsbytagname('option');
var index = -1;
var choose = [];
for(var i=somenodelist.length-1;i>0;i--){
var sm = topinyinshengmu(somenodelist[i].innerhtml);
if(sm.indexof(tmp)==0){
inp = tmp;
choose[choose.length] = somenodelist[i];
obj.removechild(somenodelist[i]);
}
}
if(choose.length>0){
somenodelist = obj.getelementsbytagname('option');
var len = somenodelist.length;
for(var i=0;i<len;i++){
choose[choose.length] = somenodelist[i];
}
for(var i=0;i<choose.length;i++){
obj.appendchild(choose[i]);
}
obj.selectedindex = 0;
}
somenodelist = null;
choose = null;
}
</script>

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网