主题：【原创】发帖时，如不小心离开页面，如何提示用户 -- 铁手

这个是西西河功能的一部分，大部分的功能已经实现，还有一些需要解决的问题，写出来，一则和需要的同学一起分享，另外也希望能够得到一些讨论。

具体的情况是，因为回复的窗口出现在阅读的页面中，有时候会出现用户在输入部分回复内容后，需要到别的页面查看一些内容，结果不小心就跳转到其他页面，导致所输入的内容丢失。对于这种情况，希望能够有合适的方法来保证辛辛苦苦输入的内容不会轻易消失。

一种方法是GMAIL里面的做法，就是在用户输入的同时，定时在后台服务器保存所输入的内容（短的内容估计也可以在本地机器上用cookie的方式来保存）。这样可以不用担心用户链接跳转到别的地方，也不用担心突然断电关机的情况。定时保存用户所输入内容，用AJAX实现起来也比较方便。问题在于这需要相对比较强大的后台服务器的支持。如果有多个用户同时在线输入内容的话，就相当于凭空多增加了很多的用户在访问服务器。我以前试过在西西河放一个实时刷新某些内容的功能，结果服务器后来不堪重负最终放弃。如果手头资源足够，可以用这个办法，没足够的资源的情况下，估计用下面这个方式会更好一些。

这另外一种方式，就是在用户万一不小心要离开页面的时候，可以提供一个提示信息。有一个 event 叫 onbeforeunload 可以被利用。简单的说，任何可能导致离开当前访问页面的操作都会诱发这个 event 发生，比如说回退，点击别的链接，刷新页面等等。我们需要做的，就是给这个event定制一个提醒 function。

比如在javascript中：

window.onbeforeunload=AreYouSure

function AreYouSure(){

return "确定要离开本页面？"

}

好了，这个是最基本的思路。稍微优化一点，可以只在那些需要有输入内容的页面加这个定制的event function，也可以设定一个标志符，只在用户有内容改动的时候才让这个功能有效。

现在回到西西河来。

一个输入框，比如回复框和短信发送，都涉及到 form 里面的内容改动 和 最后的提交。河里对输入框有一些辅助功能，比如点击一个笑脸可以在所输入的内容里添加代表笑脸的代码，点击一个按钮可以添加一些特殊效果的代码。在大部分的情况下，这些功能都没有问题。难度出在添加那些表情图的时候。

考虑有两种可能来实现添加表情符的功能。一种是用链接，也就是

<a href="javascript:void(0)" onclick="mmmm">image here</a>

的方式。一种是

<input type="image" src="image here" onclick="mmmm">

最后一种是

<button type="button"><img src="image here"></button>

考虑到所需要实现的功能，在javascript function 中需要引用到 form 中的文字输入框。一是可以在function的传入参数中用form的名称，然后用 document.getItemByID(form name)来获得这个form的引用，二是可以直接传入 form object 的 引用。用<input type="image" ...>或者<button ...> 的好处是在于可以用 this.form 作为输入参数来引用相应的form object而不用考虑所在 form 的具体名称。这在一定程度上可以做到与具体 form 名称无关，函数显得比较通用一些。需要注意的是，<input type="image" 这样的实现方式，浏览器会认为这是一个提交 (submit button)，在点击那些 image button 的时候，会触发 onbeforeunload，导致不必要的提示信息出现。

这样一来，最好的办法，应该是使用

<button type="button" onclick="..."><img src="image here"></button> 浏览器会认为这是一个 push button 而不是作为 submit button 来处理。

用链接的方式也可以，但是需要注意的是，有的链接方式虽然不会导致离开页面，但是依旧会发出离开页面的消息。情况有些复杂，主要是涉及到不同的浏览器。简单测试后，<a href="javascript:function...">，<a href="javascript:void(0)" onclick="...." 在 firefox 下正常，但是 <a href="javascript:void(0)" onclick="....">在IE8下面点击这个链接引入输入框的时候就会发出离开页面的消息，<a href="javascript:;" onclick="function();return false">链接</a> 在IE8下面则正常。

眼下看来，比较好的通用的方式大概就是 <a href="javascript:void(funtion)">链接</a>。相对节省空间。唯一的问题是，如果第一次点击链接引入输入框后，在输入过程中，如果再次不小心点击到那个链接，以前输入的内容就会丢失。也许应该在第一次点击之后，就把那个链接失效掉。