首页 新闻 搜索 专区 学院

关于文本框focus和blur的问题

0
悬赏园豆:100 [已解决问题] 解决于 2012-11-14 11:38

原来的文本框这样,

如果鼠标点文本框输入要输入内容是,就变这样,

如果用户没输入内容,鼠标从文本框blur的时候,文本框还变回原来的样子,(和QQ空间回复功能差不多),这里的js代码要如何写,求指导。还有如果鼠标点发表按钮的时候,不做任何操作,只有鼠标点击除文本框和发表按钮以外的任何地方的时候才变化

B&G的主页 B&G | 初学一级 | 园豆:74
提问于:2012-11-13 20:01
< >
分享
最佳答案
0
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .Blur
        {
            width: 200px;
            height: 30px;
            border: 1px solid gray;
        }

        .Focus
        {
            width: 200px;
            height: 100px;
            border: 1px solid blue;
        }
    </style>
    <script type="text/javascript">
        function OnTxt1Blur(txt) {
            if (document.activeElement.id != "btn1")
                txt.className = "Blur";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txt1" runat="server" onfocus="this.className = 'Focus';" onblur="OnTxt1Blur(this);"></asp:TextBox>
        <asp:Button ID="btn1" runat="server" Text="Button1" OnClick="btn1_Click" />
    </div>
    </form>
</body>
</html>


后台代码中:

        protected void btn1_Click(object sender, EventArgs e)
        {
            //提交文本框内容
            txt1.Text = "";
            txt1.Focus();
        }

其中, 那两个样式, 你可以根据自己的爱好随便定义.

收获园豆:100
夏狼哉 | 小虾三级 |园豆:833 | 2012-11-14 10:39
其他回答(3)
0

一个小的示例:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>    
    <script type="text/javascript" src="jquery-1.8.0.js"></script>
 </head>
<body>
    <div>
        <div id="div1" style="width:200px">我也说一句</div>
        <textarea id='text1' style='width:200px;display:none' ></textarea>
     </div>
     <script type="text/javascript">
         $(function(){
            $("#div1").click(function(){
                $("#text1").show();
                $("#text1").focus();
                $("#text1").val("");
                $(this).hide();
            });
            
            $("#text1").blur(function(){
                $("#div1").show();
                $(this).hide();
            });
            
         });
     </script>
 </body>
</html>
chenping2008 | 园豆:9836 (大侠五级) | 2012-11-13 20:42

blur事件中,如何点击的是回复按钮,文本框不隐藏,主要是这个问题不会,能不能稍微修改下这个例子,加个按钮

支持(0) 反对(0) B&G | 园豆:74 (初学一级) | 2012-11-13 21:58
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
.p{display:none;text-aling:right;}
</style>
<script src="jquery-1.7.js"></script>
<script type="text/javascript">
   $(function(){
       $("#txt").focus(function(){
           $(this).height("80px");
           $(".p").show();
           }).blur(function(){
           $(this).height("25px");
           $(".p").hide();
               });
               
    $("#btn").click(function(){
        alert("回复成功");
        });
       })
       
</script>
</head>

<body>

<div>
<textarea id="txt" rows="1"> </textarea>
<p class="p"><input id="btn" type="button"  value="回复"/></p>
</div>
</body>
</html>


请帮我修改下,如果点击的是回复按钮,就不执行blur里面的事件,如果点击的是除按钮或者文本框以外的地方,就执行现在blur里面的事件。谢谢了

支持(0) 反对(0) B&G | 园豆:74 (初学一级) | 2012-11-13 22:58

@智之水葉神: 那就捕捉$(body).click事件

支持(0) 反对(0) 田林九村 | 园豆:2367 (老鸟四级) | 2012-11-14 08:00
0

楼主试试这个:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>输入框</title>
    <script src="scripts/jquery-1.7.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $txt = $("#txt");    //缓存变量
            var height = $("#txt").height();  //默认高
            var width = $("#txt").width();   //默认宽
            //var content = $("#txt").val();     //文本框里的内容
            $txt.focus(function () {
                $(this).animate({ height: "70", width: "350" }, 200);
            }).blur(function () {
                if ($.trim($("#txt").val()) == "") {
                    $(this).animate({ height: height, width: width }, 200);
                }
            });
        })
    </script>
</head>
<body>
    <div>
        <textarea id="txt" rows="1" cols="30"> </textarea>
    </div>
</body>
</html>
oppoic | 园豆:570 (小虾三级) | 2012-11-14 08:40
0

实现思路这个文本框本身是一个textarea 当获得焦点时改变文本域本身的高度,并将一个全局变量的状态置为可以发送信息的状态,当失去焦点时,将文本域的高度改为原始高度即可

az235 | 园豆:8283 (大侠五级) | 2012-11-14 11:34
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册