<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js "></script> <script type="text/javascript" > //回复评论块 var $reply = $(" <div id='ReplyContent'><div><textarea id='txtReplyContent'></textarea></div><div> <input type='button' id='replybtn' class='btnDefult' value='提交评论' /></div></div>"); function Reply() { //删除防止产生多个回复框 $reply.remove(); $("body").append($reply); //得到焦点 $("#txtReplyContent").focus(); //内容失去焦点就清除回复评论块 $("#txtReplyContent").blur(function () { $reply.remove(); }) //回复成功 $("#replybtn").click(function () { alert('回复成功') //删除回复节点 $reply.remove(); }) } </script> </head> <body> <div><a href="javascript:void()" onclick="Reply()">回复</a></div> </body> </html>
问题:现在是不触发提交事件,我想点击提交评论的时候不触发文本框的失去焦点事件,或者先执行点击事件再执行失去焦点事件,我应该怎么做呢?
你这样用户体验也不是很好,一般都是点击回复的时候出现回复框,再次点击的时候判断有没有回复框,然后取消或添加回复框
你看一下QQ空间的回复是怎么让的,下面是我改的,你看一下符合你的要求吗
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js "></script>
<script type="text/javascript" >
$(function(){
$("#replybtn").click(function () {
alert('回复成功');
$("#txtReplyContent").html("");
$("#ReplyContent").css("display","none")
})
})
function Reply() {
var stl=$("#ReplyContent").css("display");
if(stl=="none")
{
$("#ReplyContent").css("display","block");
$("#txtReplyContent").focus();
}
else
{
$("#ReplyContent").css("display","none")
}
}
</script>
</head>
<body>
<div><a href="javascript:void()" onClick="Reply()">回复</a></div>
<div id='ReplyContent' style="display:none"><div><textarea id='txtReplyContent'></textarea></div><div> <input type='button' id='replybtn' class='btnDefult' value='提交评论' /></div></div>
</body>
</html>
//内容失去焦点就清除回复评论块 $("#txtReplyContent").blur(function () { $reply.remove(); })
把这一块去掉。后面的提交、和alert就都会实现了。不过没有了离开文本框的blur事件
这样的话用户效果就没那么好了。
@BZindex: 你是想。。点击提交按钮不消失。点别的地方文本框消失?
@g皓皓: j是的,就是这样
@BZindex: 这样、看看你写的东西、分析下;
1:你的#txtReplyContent是<textarea>标签的id。blur事件就是在它这里的。你写的程序运行后点按钮。button是一个单独的input(也不在一个div)、肯定会关闭的;
2:要么你给它们一个大div,控制鼠标是否悬浮在div里。在(mouseover)-显示;否(mouseout)-隐藏;
这类方法百度一抓一大把;
3:换思路、方法吧、
这样不行啊 那就不要失去焦点的事件了 直接把清空文本框的代码放到点击事件里
但我可能点了回复后就不想评论了,去点其它东西,这时候我就想删了这个回复框。
@BZindex: 你不想评论 要么你加一个取消评论的按钮 要么点击评论按钮 这里面去删除回复框了