飘易博客(作者:Flymorn)
订阅《飘易博客》RSS,第一时间查看最新文章!
飘易首页 | 留言本 | 关于我 | 订阅Feed

JS获取表单值,提交时自动复制内容到剪贴板

Author:Flymorn Source:飘易博客
Categories:网站设计 PostTime:2008-4-16 16:48:37
正 文:
    昨天,飘易在写文章的时候,写好文章后,遇到断线,提交失败,数据丢失的情况;很是烦人,白白打了那么多的字;为了避免日后再次遇到这样的问题,我于是便简单的改进了一下博客的后台,在提交文章之前,利用JS获取表单值,自动复制内容到剪贴板中,这样,即使数据丢失了,也同样可以从系统剪贴板里粘贴回来。

    利用javascript读取表单数据,可以利用以下三种方法获取:

1、通过表单ID属性:var a = document.getElementById("id");
2、通过表单名称属性:var b = document.getElementsByName("name"); 
3、直接通过表单名字获取:var c = form.content.value;

    而通常的表单验证方法则非常简单;在表单里加上一句:onsubmit="return check(this);" ,然后在js里写上这样的一个check函数就可以了。举个例子如下:

<form name="add" method="post" onSubmit="return check(this);" action="">
<input name="title" type="text" size="62" maxlength="100" />
<input type="submit" name="s" value="【我要发布】" />
</form>
<!--##JS表单验证函数开始##-->
<script language="JavaScript">
<!--
//js验证表单
function check(it){
var a=it.title.value;
if(a.length<5){
alert("提示:标题长度不能小于5!");
document.add.title.focus(); //聚焦
return false;
}
-->
</script>

    那么,如何让系统提交表单的时候,自动记住表单的内容,并复制到剪贴板里呢?函数很简单:

<script language="JavaScript">
<!--
//复制表单内容到剪贴板
function copyok(it){
var a=it.content.value;
window.clipboardData.setData('Text',a); //复制到剪贴板
alert("提示:内容已经复制到剪贴板!\n\n如果提交失败,可以直接粘贴!");
}
-->
</script>

    然后同样在form里加入一句:onsubmit="return copyok(this);" 就ok了。其实这些小的细节问题,google的blogger已经解决了,google会在你写文章的时候自动地每隔1分钟保存你已经写好了的内容,这样,即使电脑意外死机,损失的数据也只是一小部分而已;感谢组装电脑提示我。然而,目前国内的很多CMS系统并没有考虑到这个细节问题,如动易,dede,phpcms,风讯等,希望程序开发者们学习google,让国产的程序越来越好。
作者:Flymorn
来源:飘易博客
版权所有。转载时必须以链接形式注明作者和原始出处及本声明。
上一篇:Alexa排名大调整,中文网站排名上升
下一篇:SQL语句SELECT TOP用法小结
6条评论 “JS获取表单值,提交时自动复制内容到剪贴板”
2008-4-18 0:09:33
飘易最近精力不错,能一天一帖了。加油。
2 Flymorn
2008-4-18 8:46:11
呵呵。这阵子都是些技术性的文章,原因是最近我在研究学习PHP……
2008-4-18 14:38:14
嗯,上次你也提到学一门语言,然后就写它,看来不错
4 小刚
2008-11-4 16:08:31
怎么把这个内容 写进一个.txt里面呢?
5 Axpwx
2010-1-9 21:05:02
提交时copy没啥意义,你写文章时死机了一样什么都没了。
而且window.clipboardData.setData默认在IE7和IE8下是有提示的。
最好的是能在写文章的时候隔一会就通过ajax在服务器上保存一下,这样就算你电脑掉电了,一样不丢失内容。
2010-5-11 17:57:01
让回传的时候就算是失败了 刚才评论的内容还在呢?
发表评论
名称(*必填)
邮件(选填)
网站(选填)

记住我,下次回复时不用重新输入个人信息
© 2007-2010 飘易博客 Www.Piaoyi.Org 原创文章版权由飘易所有 渝ICP备07006361号