关于文本框focus和blur的问题
0
最佳答案
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
其他回答(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>
blur事件中，如何点击的是回复按钮，文本框不隐藏,主要是这个问题不会,能不能稍微修改下这个例子,加个按钮
<!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里面的事件。谢谢了
@智之水葉神: 那就捕捉$(body).click事件
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>
0
实现思路这个文本框本身是一个textarea 当获得焦点时改变文本域本身的高度，并将一个全局变量的状态置为可以发送信息的状态，当失去焦点时，将文本域的高度改为原始高度即可
