<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>前后求索 &#187; javascript</title>
	<atom:link href="http://dwfeng.net/blog/tag/javascript/feed" rel="self" type="application/rss+xml" />
	<link>http://dwfeng.net/blog</link>
	<description>self.生活{&#124;x&#124; 快乐 &#38;&#38; 幸福}</description>
	<lastBuildDate>Tue, 16 Jun 2009 15:56:02 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>如何在IE和Firefox里屏蔽BackSpace</title>
		<link>http://dwfeng.net/blog/2008/10/22/how-to-disable-backspace-in-ie-and-firefox.html</link>
		<comments>http://dwfeng.net/blog/2008/10/22/how-to-disable-backspace-in-ie-and-firefox.html#comments</comments>
		<pubDate>Wed, 22 Oct 2008 03:39:49 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[web design]]></category>
		<category><![CDATA[网络]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[tips]]></category>

		<guid isPermaLink="false">http://dwfeng.net/blog/?p=160</guid>
		<description><![CDATA[在网页上输入信息，特别是注册的时候，如果输入的焦点不在输入框里的话，按BackSpace键，IE和Firefox以及许多浏览器都会理解为”后退”命令，返回上一页。这样的话，刚才输入的内容就全没了。这是非常让人泄气的事儿，为了在自己设计的页面里，给用户更好的使用体验，有必要屏蔽掉这个功能。 其实，在GMail，Google Document等许多基于Web的应用都对这个问题作了相应的处理。当这种操作发生时，出项一个警告，提示用户是否真的想放弃当前页面上输入的内容。这个屏蔽功能其实很简单，只要在你写的html里加上一段Javascript代码就行了。让javascript代码检查用户的输入事件，如果发生了输入焦点不在输入框的时候，用户按下了Backspace键，那就触发相应的代买来处理就行了。但，需要注意的是IE和Firefox的事件处理方法不同，API也不一样，需要区别对待。做Web应用最让人恼火是莫过于此了。为了适应各种浏览器，不得不写各种对应代码，然后在各种浏览器上做测试。如果Web应用还有手机可以浏览的功能，那就更麻烦了。现在市场上，几乎每天都在发布新的手机，为了不出问题，你就必须定期的在所有的新手机上做测试。这是让人抓狂啊。要是有统一的标准该多好。 好像跑题了，呵呵，演过正传，下面就是实例代码，在IE7和Firefox3测试通过。 &#60;script type=&#34;text/javascript&#34;&#62;&#60;!-- // For IE if (typeof window.event != 'undefined') { &#160; document.onkeydown = function() { &#160;&#160; &#160;var type = event.srcElement.type; &#160;&#160; &#160;var code = event.keyCode; &#160;&#160; &#160;return ((code != 8 &#38;#038;&#38; code != 13) &#124;&#124; &#160;&#160; &#160; &#160; &#160; &#160; &#160;(type == 'text' &#38;#038;&#38; code != 13 ) &#124;&#124; &#160;&#160; [...]]]></description>
			<content:encoded><![CDATA[<div style="float: left;">
<div id="attachment_161" class="wp-caption alignnone" style="width: 322px"><a href="http://dwfeng.net/blog/wp-content/uploads/2008/10/disablebackspace.jpg" rel="shadowbox[post-160];player=img;"><img class="size-full wp-image-161" title="disablebackspace" src="http://dwfeng.net/blog/wp-content/uploads/2008/10/disablebackspace.jpg" alt="disablebackspace" width="312" height="116" /></a><p class="wp-caption-text">如何在IE和Firefox里屏蔽BackSpace键</p></div>
</div>
<p>在网页上输入信息，特别是注册的时候，如果输入的焦点不在输入框里的话，按BackSpace键，IE和Firefox以及许多浏览器都会理解为”后退”命令，返回上一页。这样的话，刚才输入的内容就全没了。这是非常让人泄气的事儿，为了在自己设计的页面里，给用户更好的使用体验，有必要屏蔽掉这个功能。</p>
<p>其实，在GMail，Google Document等许多基于Web的应用都对这个问题作了相应的处理。当这种操作发生时，出项一个警告，提示用户是否真的想放弃当前页面上输入的内容。这个屏蔽功能其实很简单，只要在你写的html里加上一段Javascript代码就行了。让javascript代码检查用户的输入事件，如果发生了输入焦点不在输入框的时候，用户按下了Backspace键，那就触发相应的代买来处理就行了。但，需要注意的是IE和Firefox的事件处理方法不同，API也不一样，需要区别对待。做Web应用最让人恼火是莫过于此了。为了适应各种浏览器，不得不写各种对应代码，然后在各种浏览器上做测试。如果Web应用还有手机可以浏览的功能，那就更麻烦了。现在市场上，几乎每天都在发布新的手机，为了不出问题，你就必须定期的在所有的新手机上做测试。这是让人抓狂啊。要是有统一的标准该多好。<br />
好像跑题了，呵呵，演过正传，下面就是实例代码，在IE7和Firefox3测试通过。</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline">&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--</li>
<li>// For IE</li>
<li>if (typeof window.event != 'undefined') {</li>
<li>&nbsp; document.onkeydown = function() {</li>
<li>&nbsp;&nbsp; &nbsp;var type = event.srcElement.type;</li>
<li>&nbsp;&nbsp; &nbsp;var code = event.keyCode;</li>
<li>&nbsp;&nbsp; &nbsp;return ((code != 8 &amp;#038;&amp; code != 13) ||</li>
<li>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(type == 'text' &amp;#038;&amp; code != 13 ) ||</li>
<li>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(type == 'textarea') ||</li>
<li>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(type == 'submit' &amp;#038;&amp; code == 13))</li>
<li>&nbsp; }</li>
<li>} else { // FireFox/Others</li>
<li>&nbsp; document.onkeypress = function(e) {</li>
<li>&nbsp;&nbsp; &nbsp;var type = e.target.type;</li>
<li>&nbsp;&nbsp; &nbsp;var code = e.keyCode;</li>
<li>&nbsp;&nbsp; &nbsp;if ((code != 8 &amp;#038;&amp; code != 13) ||</li>
<li>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;(type == 'text' &amp;#038;&amp; code != 13 ) ||</li>
<li>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;(type == 'textarea') ||</li>
<li>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;(type == 'submit' &amp;#038;&amp; code == 13)) {</li>
<li>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;return true</li>
<li>&nbsp;&nbsp; &nbsp;} else {</li>
<li>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;alert('你真的想放弃现在正在编辑的内容吗？再想想！');</li>
<li>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;return false</li>
<li>&nbsp;&nbsp; &nbsp;}</li>
<li>&nbsp; }</li>
<li>}</li>
<li>// --&gt;&lt;/script&gt;</li></ol></div>
]]></content:encoded>
			<wfw:commentRss>http://dwfeng.net/blog/2008/10/22/how-to-disable-backspace-in-ie-and-firefox.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
