利用Google接口实现拼写检查

1 2 3 4 下一页

　　在开发一个国外外包项目时，客户提出一个需求，就是希望在文本框中输入单词，在保存前能够进行拼写检查，如果发现单词错误，可以提醒用户进行改正，为此，在结合参考了各种方案之后，选择了一个免费的方案，Google的一个API接口，https://www.google.com/tbproxy/spell?lang=，该接口提供多种语言的拼写检查，并能够返回相似的单词，并且幸运的是，在网上找到了一个开源的程序包googiespell，所以经过简单的包装处理，做成了一个拼写检查的小控件，使用起来就很方便了。

　　实现原理

　　在.net的页面上，在submit按钮提交之前，将页面的文本框内容，通过ajax的方式，采用代理类的方式，发送给Google的接口，接口会返回拼写结果，如果没有拼写错误，浏览器端就直接执行提交操作，如果有错误，弹出一个Spell Check Error的对话框，提示用户进行修改，点“yes”返回页面修改，点“No”的话就忽略掉拼写错误，直接提交。

　　代码分享

　　用户控件Shouji138.com.SpellValid.ascx

　　这个文件封装了错误提示的输入框效果，还有提交按钮的一些操作代码。

<%@　Control　Language="C#"　AutoEventWireup="true"　Codebehind="Shouji138.com.SpellValid.ascx.cs"
　　　　Inherits="SpellCheck.Shouji138_com_SpellValid"　%>
　
<script　type="text/JavaScript">
　　　　var　googie5　=　new　GoogieSpellMultiple("/googiespell/",　"/googiespell/sendSpellReq.ASPx?lang=");
　
　　　　//New　menu　item　"Add"
　　　　var　add_checker　=　function(elm)　{
　　　　　　　　return　true;
　　　　};
　　　　var　add_item　=　function(elm,　current_googie)　{
　　　　　　　　googie5.ignoreAll(elm);
　　　　};
　　　　//googie5.appendNewMenuItem("Add",　add_item,　add_checker);
　
　　　　var　fn_no_more_errors　=　function(e)　{
　　　　　　//　　alert(''no　more　errros'');
　　　　　　　　passcheck　=　true;
　　　　}
　
　　　　googie5.setDependent();
　　　　googie5.setCustomAjaxError(function(req)　{
　　　　　　　//　alert(''error'');
　　　　});
　　　　googie5.useCloseButtons();
　　　　googie5.noMoreErrorsCallback(fn_no_more_errors);
　　　　googie5.setSpellContainer("global_spell_container");
　　　　//　googie5.decorateTextareas(textbox,　"hel",　"t");
　
　　　　//Getstatespan2();
　
　　　　var　passcheck　=　false;
　　　　var　savebutton　=　null;
　　　　var　waiti　=　0;
　
　　　　function　CheckSpell(obj)　{
　
　　　　　　　　if　(typeof　(Page_ClientValidate)　==　''function'')　{
　　　　　　　　　　　　if　(Page_ClientValidate()　==　false)　{
　　　　　　　　　　　　　　　　return　false;
　　　　　　　　　　　　}
　　　　　　　　}
　　　　　　　　savebutton　=　obj;
　
　　　　　　　　if　(googie5.noErrorsFound()　||　passcheck)　{
　　　　　　　　　　　//　alert("CheckSpell　ok");
　　　　　　　　　　　　return　true;
　　　　　　　　}
　　　　　　　　//alert(document.getElementById("global_spell_container").innerHTML);
　　　　　　　　if　(document.getElementById("okclickspan"))
　　　　　　　　　　　　invokeClick(document.getElementById("okclickspan"))
　　　　　　　　setTimeout("WaitSavetate()",　1000);
　　　　　　　　return　false;
　　　　}
　
　　　　function　ToDoNext()　{
　　　
　　　　
　　　　　　　　if　(savebutton.href)　{
　　　　　　　　　　　　var　href　=　savebutton.href.replace("Javascript:",　"");
　　　　　　　　　　　　href　=　unescape(href);
　　　　　　　　　　　　//alert(href);
　　　　　　　　　　　　eval(href);
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　__doPostBack(savebutton.id,"");
　　　　　　　　　return　true;
　　　　　　　　}
　　　　}
　
　
　　　　function　WaitSavetate()　{
　　　　　　　　if　(waiti　>　100)　{
　　　　　　　　　　　　waiti　=　0;
　　　　　　　　　　　　return;
　　　　　　　　}
　　　　　　　　waiti++;
　　　　　　　　//document.getElementById("statespan").innerHTML　=　"waiting:"　+　waiti　+　"　"　+　googie5.noErrorsFound();
　　　　　　　　if　(passcheck　||　googie5.noErrorsFound())　{
　　　　　　　　　　　　//alert("pass");
　　　　　　　　　　　　//invokeClick(savebutton);　　　　　　　　　　　
　　　　　　　　　　　　　　　　ToDoNext();
　　　　　　　　　　　
　　　　　　　　　　　//　__doPostBack(savebutton.id,　'''');
　　　　　　　　}
　　　　　　　　else　{
　　　　　　　　　　　　if　(googie5.getState()　==　"checking_spell")　{
　　　　　　　　　　　　　　　　setTimeout("WaitSavetate()",　500);
　　　　　　　　　　　　}
　　　　　　　　　　　　else　{
　　　　　　　　　　　　　　　　showdivspellcheckerror();
　　　　　　　　　　　　}
　　　　　　　　}
　　　　}
　　　　function　getText1value()　{
　　　　　　　　alert(document.getElementById(textbox).value);
　
　　　　}
　　　　function　invokeClick(element)　{
　　　　　　　　if　(element.click)　element.click();
　　　　　　　　else　if　(element.fireEvent)　element.fireEvent(''onclick'');
　　　　　　　　else　if　(document.createEvent)　{
　　　　　　　　　　　　var　evt　=　document.createEvent("MouseEvents");
　　　　　　　　　　　　evt.initEvent("click",　true,　true);
　　　　　　　　　　　　element.dispatchEvent(evt);
　　　　　　　　}
　　　　}
　
</script>
　
<script　type="text/javascript">
　　　　function　closedivspellcheckerror()　{
　　　　　　　　document.getElementById("divspellcheckerror").style.display　=　"none";
　　　　}
　　　　function　showdivspellcheckerror()　{
　　　　　　　　var　alertFram　=　document.getElementById("divspellcheckerror");
　　　　　　　　alertFram.style.position　=　"absolute";
　　　　　　　　alertFram.style.left　=　"50%";
　　　　　　　　alertFram.style.top　=　"50%";
　　　　　　　　alertFram.style.marginLeft　=　"-125px";
　　　　　　　　alertFram.style.marginTop　=　-75　+　document.documentElement.scrollTop　+　"px";
　　　　　　　　//alertFram.style.width　=　"450px";
　　　　　　　　//alertFram.style.height　=　"150px";
　　　　　　　　//alertFram.style.background　=　"#ccc";
　　　　　　　　alertFram.style.textAlign　=　"center";
　　　　　　　　//alertFram.style.lineHeight　=　"150px";
　　　　　　　　alertFram.style.zIndex　=　"10001";
　　　　　　　　document.getElementById("divspellcheckerror").style.display　=　"";
　　　　}
</script>
　
<div　class="shouji138errorbox"　id="divspellcheckerror"　style="display:　none;　width:　400px">
　　　　<div　id="SccNotify"　class="yui-module　yui-overlay　yui-panel"　style="visibility:　inherit;">
　　　　　　　　<div　class="shouji138_notice-error">
　　　　　　　　　　　　Spelling　Error</div>
　　　　　　　　<div　class="shouji138_notice-body">
　　　　　　　　　　　　Spelling　errors　detected.<br　/>
　　　　　　　　　　　　Do　you　wish　to　correct　them?
　　　　　　　　　　　　<br　/>
　　　　　　　　　　　　Click　Yes　to　return,click　No　to　continue　submit.<br　/>
　　　　　　　　</div>
　　　　　　　　<div　class="shouji138_notice_foot">
　　　　　　　　　　　　<a　href="javascript:;"　onclick="closedivspellcheckerror();">
　　　　　　　　　　　　　　　　<img　src="/uploadfile/201212/13/E0135731151.gif"　style="border:　0px;"　alt="yes"　/></a>　&nbsp;&nbsp;<a
　　　　　　　　　　　　　　　　　　　　href="javascript:ToDoNext();"><img　src="googiespell/btn_no.gif"　style="border:　0px;"
　　　　　　　　　　　　　　　　　　　　　　　　alt="no"　/></a>
　　　　　　　　</div>
　　　　</div>
</div>

(责任编辑：admin)