位置：首页>> 网络编程>> JavaScript>> 页面软键盘汉字输入

页面软键盘汉字输入

　来源：51js　发布时间：2010-09-01 20:41:00　

标签：汉字,软键盘

遇到一个难题，在无物理键盘情况下，通过页面软键盘在页面文本框输入汉字，不知道51js的各位大牛有没有遇到过这种需求，如果遇到过是如何解决的，给个思路也行。

<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>汉字软键盘 - www.aspxhome.com</title><style type="text/css">#divText { border:1px solid black; }#divCandidate { border:1px solid blue; }#divCandidate span { cursor:pointer; margin:0px 2px; }#divKeyboard table { border:1px solid gray; }#divKeyboard td { padding:0px 5px; cursor:pointer; }#divKeyboard td.over { padding:0px 5px; cursor:pointer; background-color:#CCCCCC; }</style><script language="javascript">var arrData = {'ca' : ['擦','拆'],'can' : ['蚕','残','掺'],'cang' : ['藏','仓','沧','舱']};var arrIME = {};function createIndex($arr, $txt){var arr = $arr;var c;for(var i=0; i<$txt.length; i++){c = $txt.charAt(i).toLowerCase();if(typeof(arr[c]) == "undefined"){arr[c] = {};arr[c]['#'] = [];}arr = arr[c];}return arr['#'];}function initArrayIME($data){var arr;for(var key in $data){arr = createIndex(arrIME, key);for(var i=0; i<$data[key].length; i++){arr[i] = $data[key][i];}}}initArrayIME(arrData);var arrInputChar = [];function Keyboard_OnMouseOver($evt){var evt = window.event || $evt;var src = evt.target || evt.srcElement;if(src.tagName.toUpperCase() == 'TD'){src.className = 'over';}}function Keyboard_OnMouseOut($evt){var evt = window.event || $evt;var src = evt.target || evt.srcElement;if(src.tagName.toUpperCase() == 'TD'){src.className = '';}}function Keyboard_OnClick($evt){var evt = window.event || $evt;var src = evt.target || evt.srcElement;if(src.tagName.toUpperCase() == 'TD'){switch(src.innerHTML){case ' ':break;case '@':arrInputChar = [];Candidate_Update();break;default:arrInputChar[arrInputChar.length] = src.innerHTML.toLowerCase();Candidate_Update();break;}}}function Candidate_OnClick($evt){var evt = window.event || $evt;var src = evt.target || evt.srcElement;if(src.tagName.toUpperCase() == 'SPAN'){arrInputChar = [];Candidate_Update();Candidate_Confirm('divText', src.innerHTML); // IE6 src.innerHTML取不出文字}}function Candidate_Confirm($domId, $txt){var dom = document.getElementById($domId);if(dom){if(dom.innerHTML == ' ')dom.innerHTML = $txt;elsedom.innerHTML += $txt;}}function Candidate_GetList($arr, $count){var arrList = [];if($arr && $arr['#']){for(var i=0; i<$arr['#'].length && i<$count; i++){arrList[i] = $arr['#'][i];}for(var key in $arr){if(key == '#')continue;if(arrList.length >= $count)break;var arr = Candidate_GetList($arr[key], $count-arrList.length);for(var i=0; i<arr.length; i++)arrList[arrList.length] = arr[i];}}return arrList;}function Candidate_Update(){var dom = document.getElementById('divCandidate');if(dom){var html = '';if(arrInputChar.length > 0){var arr = arrIME;for(var i=0; i<arrInputChar.length; i++){arr = arr[arrInputChar[i]];if(typeof(arr) == 'undefined')break;}var arrList = Candidate_GetList(arr, 6);html = arrInputChar.join('').toLowerCase();if(arrList.length > 0)html += ':' + '<SPAN>' + arrList.join('</SPAN><SPAN>') + '</SPAN>';}else{html = ' ';}dom.innerHTML = html;}}</script><body><div id="divText"> </div><div id="divCandidate" onclick="Candidate_OnClick(event)"> </div><div id="divKeyboard"><table border="1" onmouseover="Keyboard_OnMouseOver(event)" onmouseout="Keyboard_OnMouseOut(event)" onclick="Keyboard_OnClick(event)"><tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr><tr><td>G</td><td>H</td><td>I</td><td>J</td><td>K</td><td>L</td></tr><tr><td>M</td><td>N</td><td>O</td><td>P</td><td>Q</td><td>R</td></tr><tr><td>S</td><td>T</td><td>U</td><td>V</td><td>W</td><td>X</td></tr><tr><td>Y</td><td>Z</td><td> </td><td> </td><td> </td><td title="clear">@</td></tr></table></div></body></html>

var arrData = {
'ca' : ['擦','拆']
,'can' : ['蚕','残','掺']
,'cang' : ['藏','仓','沧','舱']
};

定义字库，字库得你自己搞定。

FireFox下没问题
IE6不知道什么鬼毛病。。。innerHTML设了取不出来
大概给个参考，这个就不调了

投稿

页面软键盘汉字输入

猜你喜欢