首页新闻找找看学习计划

关于的JS问题

0
悬赏园豆:10 [已解决问题] 解决于 2016-02-03 11:30
<!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>

 


问题:现在是不触发提交事件,我想点击提交评论的时候不触发文本框的失去焦点事件,或者先执行点击事件再执行失去焦点事件,我应该怎么做呢?

wxl369的主页 wxl369 | 初学一级 | 园豆:193
提问于:2016-02-02 10:10
< >
分享
最佳答案
0

你这样用户体验也不是很好,一般都是点击回复的时候出现回复框,再次点击的时候判断有没有回复框,然后取消或添加回复框

你看一下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>

收获园豆:4
海之殇 | 菜鸟二级 |园豆:472 | 2016-02-02 12:40
其他回答(2)
0

//内容失去焦点就清除回复评论块 $("#txtReplyContent").blur(function () { $reply.remove(); })

把这一块去掉。后面的提交、和alert就都会实现了。不过没有了离开文本框的blur事件

收获园豆:3
Ctrl` | 园豆:2066 (老鸟四级) | 2016-02-02 10:19

这样的话用户效果就没那么好了。

支持(0) 反对(0) wxl369 | 园豆:193 (初学一级) | 2016-02-02 10:29

@BZindex: 你是想。。点击提交按钮不消失。点别的地方文本框消失?

支持(0) 反对(0) Ctrl` | 园豆:2066 (老鸟四级) | 2016-02-02 10:46

@g皓皓: j是的,就是这样

支持(0) 反对(0) wxl369 | 园豆:193 (初学一级) | 2016-02-02 11:17

@BZindex: 这样、看看你写的东西、分析下;

1:你的#txtReplyContent是<textarea>标签的id。blur事件就是在它这里的。你写的程序运行后点按钮。button是一个单独的input(也不在一个div)、肯定会关闭的;

2:要么你给它们一个大div,控制鼠标是否悬浮在div里。在(mouseover)-显示;否(mouseout)-隐藏;

这类方法百度一抓一大把;

3:换思路、方法吧、

支持(0) 反对(0) Ctrl` | 园豆:2066 (老鸟四级) | 2016-02-02 13:55
0

这样不行啊  那就不要失去焦点的事件了 直接把清空文本框的代码放到点击事件里

收获园豆:3
单恋 | 园豆:678 (小虾三级) | 2016-02-02 11:06

但我可能点了回复后就不想评论了,去点其它东西,这时候我就想删了这个回复框。

支持(0) 反对(0) wxl369 | 园豆:193 (初学一级) | 2016-02-02 11:18

@BZindex: 你不想评论   要么你加一个取消评论的按钮 要么点击评论按钮 这里面去删除回复框了

支持(0) 反对(0) 单恋 | 园豆:678 (小虾三级) | 2016-02-02 11:49
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册