jquery，执行到点击事件后，再次获得焦点，为什么按钮也会被获取焦点呢？

时间：2022-11-17 22:37:00
 $(function () {
        $("td input:text:first").focus();
        var $inp = $("td input:text");
        $inp.bind("keydown", function (e) {
            var key = e.which;
            
            if (key == 13) {                
//               alert($(this).attr("tabindex"));
                if($(this).attr("tabindex")==15)
                {
                        e.preventDefault();
                        $("#btnNextInputPage").click();
                        setTimeout("$('td input:text:first')[0].focus();",100);
                        
                }
                else
                { 
                    window.event.keyCode=9;
                }
            }
        });
    });

14 个解决方案

#1

.click()   里面函数呢？

#2

引用 1 楼 ajccom 的回复:
.click()   里面函数呢？

click事件作用就是刷新一下table里的label控件显示值，用的是局部刷新table

#3

贴全码吧，不好测试

#4

引用 3 楼 wwtbless 的回复:
贴全码吧，不好测试 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataInput_Model_1_Horizontal.aspx.cs" Inherits="DataInput_Model_1_horizontal" %>


<!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 runat="server">

    <title><%=Resources.global.IMP109001 %></title>

    <script src="../JS/jquery-1.4.min.js" type="text/javascript"></script>

    

    <script type="text/javascript">

        $(function () {

        $("td input:text:first").focus();

        var $inp = $("td input:text");

        $inp.bind("keydown", function (e) {

            var key = e.which;

            

            if (key == 13) {                

//               alert($(this).attr("tabindex"));

                

                if($(this).attr("tabindex")==15)

                {

                        e.preventDefault();

                        $("#btnNextInputPage").click();

//                        setTimeout("$('td input:text:first')[0].focus();",100);

                       

                        

                }

                else

                { 

                    window.event.keyCode=9;

                }

            }

        });

    });

 

    </script>

</head>

<body>

    <form id="form1" runat="server" >

    <div >

        <asp:ScriptManager ID="SM" runat="server">

                </asp:ScriptManager>

<div style="margin:0px;left:0px;padding:0px;" >

     

    <asp:UpdatePanel ID="upInput" runat="server" UpdateMode="Conditional">

        <ContentTemplate>

          <table style="width:730px;margin:auto;margin-top:0px;" >

                <tr>

                    <td >

                        <asp:Label runat="server"  ID="lblItemID01Name"></asp:Label>

                    </td>

                    <td >

                        <asp:TextBox runat="server" TabIndex="1" Width="200px" ID="txtItemID01Input"></asp:TextBox>

                    </td>

                    <td >

                        <asp:Label runat="server"  ID="lblItemID05Name"></asp:Label>

                    </td>

                    <td >

                        <asp:TextBox runat="server" TabIndex="5" Width="200px" ID="txtItemID05Input"></asp:TextBox>

                    </td>

                    <td >

                        <asp:Label runat="server"  ID="lblItemID09Name"></asp:Label>

                    </td>

                    

                    

                    

                </tr>

                <tr>

                    <td >

                        <asp:Label runat="server"  ID="lblItemID02Name"></asp:Label>

                    </td>

                    <td >

                        <asp:TextBox runat="server" TabIndex="2" Width="200px" ID="txtItemID02Input"></asp:TextBox>

                    </td>

                    <td >

                        <asp:Label runat="server"  ID="lblItemID06Name"></asp:Label>

                    </td>

                    <td>

                        <asp:TextBox runat="server" TabIndex="6" Width="200px" ID="txtItemID06Input"></asp:TextBox>

                    </td>

                   

                   

                    

                </tr>

                <tr>

                    <td>

                        <asp:Label runat="server"  ID="lblItemID03Name"></asp:Label>

                    </td>

                    <td >

                        <asp:TextBox runat="server" TabIndex="3" Width="200px" ID="txtItemID03Input"></asp:TextBox>

                    </td>

                    <td >

                        <asp:Label runat="server"  ID="lblItemID07Name"></asp:Label>

                    </td>

                    <td >

                        <asp:TextBox runat="server" TabIndex="7" Width="200px" ID="txtItemID07Input"></asp:TextBox>

                    </td>

                    

                    

                </tr>

                <tr>

                    <td >

                        <asp:Label runat="server"  ID="lblItemID04Name"></asp:Label>

                    </td>

                    <td >

                        <asp:TextBox runat="server" TabIndex="4" Width="200px" ID="txtItemID04Input"></asp:TextBox>

                    </td>

                    

                    

                </tr>

                <tr>

                    <td colspan="2">

                        <asp:Label ID="lblInfoShow" runat="server"></asp:Label>

                    </td>

                    <td colspan="6" style="text-align:right;">

                        

                    </td>

                </tr>

            </table> 

        </ContentTemplate>

        <Triggers>

            <asp:AsyncPostBackTrigger ControlID="btnNextInputPage" />

        </Triggers>

    </asp:UpdatePanel>

    <asp:Button ID="btnCheck" runat="server" />

                        &nbsp;

                        <asp:Button ID="btnNeedInputPicture" runat="server" />

                        &nbsp;

                        <asp:Button ID="btnNextInputPage" runat="server" 

                      onclick="btnNextInputPage_Click" TabIndex="16" />

     </div>

    </form>

</body>

</html>



#5

饿，现在我把按钮放到了updatepanel外面了，但是局部刷新后，焦点到了第一个文本框，我按enter，会导致整个页面刷新，奇怪了

#6

点击事件很简单 
protected void btnNextInputPage_Click(object sender, EventArgs e)

    {                                                          

            //改变label值

            this.txtItemID01Input.Focus();


            this.btnNextInputPage.Text = "下一页";        //设置button的值为“上一页”

        }

        else if (this.btnNextInputPage.Text == "上一页")  //如果button的值为“上一页”，则执行

        {                 

            //改变label值

            this.txtItemID01Input.Focus();

            

            this.btnNextInputPage.Text = Resources.global.IMP109046;        //设置button的值为“下一页”

        }


    }

#7

路过，关住。。。。学习！

#8

补充点：
       局部刷新后，我除去了其它按钮，只留下下一页按钮，发现，焦点一直停在下一页按钮上，然后按enter，就不停的局部刷新，执行下一页，上一页事件

#9

还是无人问津么，重点是，局部刷新table后，页面焦点同时定位在了文本框和按钮上，按回车事件，执行按钮的点击，而文本框中的回车事件无发生

#10

路过，关住。。。。学习！

#11

路过的来看看怎么解决诶

#12

睡觉去了，希望明天有人回答！！

#13

我又来了，还是没人回答么

#14

   jquery获取文本框焦点 文本框中需要输入内容才可以提交，如果没有输入就提示并使该文本框获得焦点！如果没有使用jQuery的话 直接用对象.focus()就可以了，可是当我们使用了jQuery 这样$(”#nameInput”) 返回的就不是DOM对象了而是jQuery对象，这样的话$(”#nameInput”).focus()这个方法的意义也就变了，并不是使这个文本框获得焦点 而是触发这个文本框所有绑定在onfocus的函数！其实使用jQuery也非常简单将jQuery对象转化为一个DOM对象$(”#nameInput”)[0].focus() 简单的加一个[0] 便是我们想要的了！！

#1

.click()   里面函数呢？

#2

引用 1 楼 ajccom 的回复:
.click()   里面函数呢？

click事件作用就是刷新一下table里的label控件显示值，用的是局部刷新table

#3

贴全码吧，不好测试

#4

引用 3 楼 wwtbless 的回复:
贴全码吧，不好测试 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataInput_Model_1_Horizontal.aspx.cs" Inherits="DataInput_Model_1_horizontal" %>


<!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 runat="server">

    <title><%=Resources.global.IMP109001 %></title>

    <script src="../JS/jquery-1.4.min.js" type="text/javascript"></script>

    

    <script type="text/javascript">

        $(function () {

        $("td input:text:first").focus();

        var $inp = $("td input:text");

        $inp.bind("keydown", function (e) {

            var key = e.which;

            

            if (key == 13) {                

//               alert($(this).attr("tabindex"));

                

                if($(this).attr("tabindex")==15)

                {

                        e.preventDefault();

                        $("#btnNextInputPage").click();

//                        setTimeout("$('td input:text:first')[0].focus();",100);

                       

                        

                }

                else

                { 

                    window.event.keyCode=9;

                }

            }

        });

    });

 

    </script>

</head>

<body>

    <form id="form1" runat="server" >

    <div >

        <asp:ScriptManager ID="SM" runat="server">

                </asp:ScriptManager>

<div style="margin:0px;left:0px;padding:0px;" >

     

    <asp:UpdatePanel ID="upInput" runat="server" UpdateMode="Conditional">

        <ContentTemplate>

          <table style="width:730px;margin:auto;margin-top:0px;" >

                <tr>

                    <td >

                        <asp:Label runat="server"  ID="lblItemID01Name"></asp:Label>

                    </td>

                    <td >

                        <asp:TextBox runat="server" TabIndex="1" Width="200px" ID="txtItemID01Input"></asp:TextBox>

                    </td>

                    <td >

                        <asp:Label runat="server"  ID="lblItemID05Name"></asp:Label>

                    </td>

                    <td >

                        <asp:TextBox runat="server" TabIndex="5" Width="200px" ID="txtItemID05Input"></asp:TextBox>

                    </td>

                    <td >

                        <asp:Label runat="server"  ID="lblItemID09Name"></asp:Label>

                    </td>

                    

                    

                    

                </tr>

                <tr>

                    <td >

                        <asp:Label runat="server"  ID="lblItemID02Name"></asp:Label>

                    </td>

                    <td >

                        <asp:TextBox runat="server" TabIndex="2" Width="200px" ID="txtItemID02Input"></asp:TextBox>

                    </td>

                    <td >

                        <asp:Label runat="server"  ID="lblItemID06Name"></asp:Label>

                    </td>

                    <td>

                        <asp:TextBox runat="server" TabIndex="6" Width="200px" ID="txtItemID06Input"></asp:TextBox>

                    </td>

                   

                   

                    

                </tr>

                <tr>

                    <td>

                        <asp:Label runat="server"  ID="lblItemID03Name"></asp:Label>

                    </td>

                    <td >

                        <asp:TextBox runat="server" TabIndex="3" Width="200px" ID="txtItemID03Input"></asp:TextBox>

                    </td>

                    <td >

                        <asp:Label runat="server"  ID="lblItemID07Name"></asp:Label>

                    </td>

                    <td >

                        <asp:TextBox runat="server" TabIndex="7" Width="200px" ID="txtItemID07Input"></asp:TextBox>

                    </td>

                    

                    

                </tr>

                <tr>

                    <td >

                        <asp:Label runat="server"  ID="lblItemID04Name"></asp:Label>

                    </td>

                    <td >

                        <asp:TextBox runat="server" TabIndex="4" Width="200px" ID="txtItemID04Input"></asp:TextBox>

                    </td>

                    

                    

                </tr>

                <tr>

                    <td colspan="2">

                        <asp:Label ID="lblInfoShow" runat="server"></asp:Label>

                    </td>

                    <td colspan="6" style="text-align:right;">

                        

                    </td>

                </tr>

            </table> 

        </ContentTemplate>

        <Triggers>

            <asp:AsyncPostBackTrigger ControlID="btnNextInputPage" />

        </Triggers>

    </asp:UpdatePanel>

    <asp:Button ID="btnCheck" runat="server" />

                        &nbsp;

                        <asp:Button ID="btnNeedInputPicture" runat="server" />

                        &nbsp;

                        <asp:Button ID="btnNextInputPage" runat="server" 

                      onclick="btnNextInputPage_Click" TabIndex="16" />

     </div>

    </form>

</body>

</html>



#5

饿，现在我把按钮放到了updatepanel外面了，但是局部刷新后，焦点到了第一个文本框，我按enter，会导致整个页面刷新，奇怪了

#6

点击事件很简单 
protected void btnNextInputPage_Click(object sender, EventArgs e)

    {                                                          

            //改变label值

            this.txtItemID01Input.Focus();


            this.btnNextInputPage.Text = "下一页";        //设置button的值为“上一页”

        }

        else if (this.btnNextInputPage.Text == "上一页")  //如果button的值为“上一页”，则执行

        {                 

            //改变label值

            this.txtItemID01Input.Focus();

            

            this.btnNextInputPage.Text = Resources.global.IMP109046;        //设置button的值为“下一页”

        }


    }

#7

路过，关住。。。。学习！

#8

补充点：
       局部刷新后，我除去了其它按钮，只留下下一页按钮，发现，焦点一直停在下一页按钮上，然后按enter，就不停的局部刷新，执行下一页，上一页事件

#9

还是无人问津么，重点是，局部刷新table后，页面焦点同时定位在了文本框和按钮上，按回车事件，执行按钮的点击，而文本框中的回车事件无发生

#10

路过，关住。。。。学习！

#11

路过的来看看怎么解决诶

#12

睡觉去了，希望明天有人回答！！

#13

我又来了，还是没人回答么

#14

   jquery获取文本框焦点 文本框中需要输入内容才可以提交，如果没有输入就提示并使该文本框获得焦点！如果没有使用jQuery的话 直接用对象.focus()就可以了，可是当我们使用了jQuery 这样$(”#nameInput”) 返回的就不是DOM对象了而是jQuery对象，这样的话$(”#nameInput”).focus()这个方法的意义也就变了，并不是使这个文本框获得焦点 而是触发这个文本框所有绑定在onfocus的函数！其实使用jQuery也非常简单将jQuery对象转化为一个DOM对象$(”#nameInput”)[0].focus() 简单的加一个[0] 便是我们想要的了！！
标签：

相关文章