站长论坛

标题: 如何实现文本框焦点自动跳转及通过回车键提交表单 [打印本页]
作者: tzlink    时间: 2007-10-6 10:20
标题: 如何实现文本框焦点自动跳转及通过回车键提交表单
页面中如何实现文本框焦点自动跳转及通过回车键提交表单。
所需的Javascript代码:

<script language="JavaScript">

NS4 = (document.layers) ? true : false;

function checkEnter(event,element)

{     

    var code = 0;

    if (NS4)

        code = event.which;

    else

        code = event.keyCode;

    if (code==13)

     {

         if(element.name=='tbUserName')//tbUserName-用户名文本框的Name

         {

              document.frmLogin.tbPassword.focus();//frmLogin-表单名称,tbPassword-密码文本杠框的Name

         }

         if(element.name=='tbPassword')

         {

              //document.frmLogin.submit();用这种方式提交,Asp.net页面会闪一下,但实际并未提交

              //用下面的代码才能提交,我是从asp.net生成的页面中查看源文件然后复制出来的

              if (typeof(Page_ClientValidate) != 'function' ||  Page_ClientValidate()) __doPostBack('lblLogin','');

         }

     }

}



</script>



我将这些代码放在了一个LoginScript.js文件中,然后在Login.cs文件中添加如下代码就实现这样的功能:

tbUserName.Attributes.Add("onKeyPress","checkEnter(event,this)");

tbPassword.Attributes.Add("onKeyPress","checkEnter(event,this)");

System.IO.StreamReader sr=new System.IO.StreamReader(MapPath("Script")+"\\LoginScript.js");

this.RegisterClientScriptBlock("LoginScript",sr.ReadToEnd());

sr.Close();

posted on 2004-05-26 14:52 dudu 阅读(14540) 评论(16)  编辑 收藏 引用 收藏至365Key 所属分类: ASP.NET 1.1


评论
# re: 如何实现文本框焦点自动跳转及通过回车键提交表单 2004-05-26 15:11 吹雪
我建议这样写：
if(event.keyCode==13)
{
event.keyCode = 9 ;
}


当点击回车的时候去执行 Tab键，这样效果更好 ：）  回复   

# re: 如何实现文本框焦点自动跳转及通过回车键提交表单 2004-05-26 15:34 aierong
<script language="vbscript">
<!--
Sub document_onkeydown
if window.event.keyCode=13 then
window.event.keyCode=9
end if
End Sub
//-->
</script>


把上面代码放入HTML代码中，控件自动扑获回车，自动把焦点转移到下一个控件
这样就可以按照事先设置好的TabIndex属性转移焦点

  回复   

# re: 如何实现文本框焦点自动跳转及通过回车键提交表单 2004-05-26 17:36 Koffer
#region 控件获得焦点
/// <summary>
/// 通过 注册并运行脚本 使某个脚本可操作的控件获得焦点。
/// </summary>
/// <param name="strTextBoxOrButtonId"></param>
private void TextBoxOrButton_GotFocus( string strTextBoxOrButtonId )
{
string script = "<script>document.all[\"" + strTextBoxOrButtonId + "\"].focus();</script>" ;
this.RegisterStartupScript( "GotFocus" ,script );
}
#endregion  回复   

# re: 如何实现文本框焦点自动跳转及通过回车键提交表单 2004-05-26 17:38 koffer
this.txtSDUTY.Attributes["onkeydown"]="if (event.keyCode==13) {document.all.btnSDUTY.click();return false;}";

#region 如果用户用回车去做的验证
private void btnSDUTY_Click(object sender, System.EventArgs e)
{
TextBoxOrButton_GotFocus(this.txtSLORG.ID);
}
}  回复   

# re: 如何实现文本框焦点自动跳转及通过回车键提交表单 2004-06-09 09:29 ak47
你这些带颜色的关键字是如何弄上去的？
是用一个国外网址转化的吗？  回复   

# re: 如何实现文本框焦点自动跳转及通过回车键提交表单 2004-06-09 09:38 dudu
将代码从VS.NET中复制到Word, 再从Word复制过来, 就变成这样了。  回复   

# re: 如何实现文本框焦点自动跳转及通过回车键提交表单 2004-06-18 17:15 狮子洋
<script language="javascript">  
<!--  
function init()
{
document.onkeydown=keyDown  
}

function keyDown(e) {  

if(event.keyCode==13)
{
event.keyCode=9
}


<body  onload="init()">



}
//-->

</script>
这是javascript版的.  回复   

# re: 如何实现文本框焦点自动跳转及通过回车键提交表单 2004-07-08 10:38 过客
你好  回复   

# re: 如何实现文本框焦点自动跳转及通过回车键提交表单 2004-10-25 12:39 奚?
焦点是转移了，很多代码都只是转移焦点，但是却不提交表单  回复   

# re: 如何实现文本框焦点自动跳转及通过回车键提交表单 2004-12-26 10:34 lake2
有启发，谢谢各位  回复   

# re: 如何实现文本框焦点自动跳转及通过回车键提交表单 2005-01-24 10:16 听棠.NET
看我发表的 "解决WEB页面上"焦点控制"一法" http://www.cnblogs.com/tintown/archive/2005/01/06/87355.html 比这个经典多了!!!  回复   

# re: 如何实现文本框焦点自动跳转及通过回车键提交表单 2005-03-28 09:30 killren
复制粘贴消化  回复   

# re: 如何实现文本框焦点自动跳转及通过回车键提交表单 2005-07-02 10:18 ascn
我想做这样的文本框，不知道怎么实现。

文本框的最长字符为10，当输入到10字符后，自动跳转到下一个文本框，请问怎么实现？

烦请帮忙 ascn@tian-jie.com  回复   

# re: 如何实现文本框焦点自动跳转及通过回车键提交表单 2005-07-28 10:32 阿新
<SCRIPT language="javascript">
function keyvalue()
{
if(event.keyCode=="13")
{

if(!(event.srcElement.name=="btnSave"|| event.srcElement.name=="btnReturn") )
{
event.keyCode="9";
}
}
// key=window.event.keyCode;
// alert(key);
// if(key==13)//判断是否按下回车键
// {
// event.keyCode=9;
//CurTabIndex=event.srcElement.tabIndex+1//将当前tabindex的值加1
//for (n=0;n< Form1.elements.length;n++)
//{
// if (Form1.elements[n].tabIndex==CurTabIndex) //找到下一个表单元素
// {
// Form1.elements[n].focus(); //移动焦点
// return true;
// }
// }

// }
}


</script>

我是这样写的，加了判断遇到按钮就不跳了
但代码一定要放在form里面
作者: tzlink    时间: 2007-10-6 10:21
怎么在表单中按下enter键时触发的是tab键的功能?

怎么在表单中按下enter键时触发的是tab键的功能?
--------------------------------------------------------------------------------

我有一个网页表单,要求在填写一个文本框后敲回车不是提交表单而是把焦点移动到下一个文本框,请问怎么实现?

--------------------------------------------------------------------------------

document.onkeydown = function(){
event.keyCode = (event.keyCode == 13)?9:event.keyCode;
}

--------------------------------------------------------------------------------

什么意思 我看不大明白

--------------------------------------------------------------------------------

意思就是：
按下的键的键码是回车键（13）吗？是则重置键码为制表键（9），不是则还原为用户按下的键的键码
<input type=text onkeydown="event.keyCode = (event.keyCode == 13)?9:event.keyCode;">
<input type=text onkeydown="event.keyCode = (event.keyCode == 13)?9:event.keyCode;">
<input type=text onkeydown="event.keyCode = (event.keyCode == 13)?9:event.keyCode;">
<input type=text onkeydown="event.keyCode = (event.keyCode == 13)?9:event.keyCode;">
<input type=text onkeydown="event.keyCode = (event.keyCode == 13)?9:event.keyCode;">

--------------------------------------------------------------------------------

怎么使光?按enter嫔跳到下面的input里呢?

--------------------------------------------------------------------------------

function nextFocus(thisForm,thisElement,thisEvent){
txtVal=thisElement.value;
txtName=thisElement.name;
frmName=thisForm.name;
frmLength=parseInt(document.forms.length);
var go = 0;
var nxtElmnt = "";
isNetscape=(document.layers);
eventChooser = (isNetscape) ? keyStroke.which : event.keyCode;
which = String.fromCharCode(eventChooser).toLowerCase();
  
    if(which > -1 && which < 10){
        if(which != 1 && which != 2  && which != 3 && which != 4 && which != 5 && which != 6 && which != 7 && which != 8 && which != 9 ){
            go =1;
        }    }
for(p=0;p < frmLength;p++){
if(document.forms[p].name==frmName){
elemntLength=parseInt(document.forms[p].elements.length)
for(i=0;i<elemntLength;i++){
if(document.forms[p].elements.name == txtName)
{j=i+8;
if(document.forms[p].elements[j] !=null){
nxtElmnt=document.forms[p].elements[j].name;
}
if(document.forms[p][nxtElmnt] == null ){
   go=0;}
if(document.forms[p][nxtElmnt] != null){
if (document.forms[p][nxtElmnt].name.substring(0,3) == "qty" ){
if( go==1){
document.forms[p][nxtElmnt].focus();
break;
}
   }  }  }}  }
}
go =0;
}
呃?方法可以向下╋但?0?也?跳下去╋0也跟著跳。
onkeypress="nextFocus(this.form,this,event)"
怎么使?0呃?嫔?不跳呢?

--------------------------------------------------------------------------------

如果有2?<tr>,<input type=text onkeydown="event.keyCode = (event.keyCode == 13)?9:event.keyCode;">,只能跳一次╋不能跳到下一?<tr>,
如?<tr><td><input type=text onkeydown="event.keyCode = (event.keyCode == 13)?9:event.keyCode;"></td><td>
<input type=text onkeydown="event.keyCode = (event.keyCode == 13)?9:event.keyCode;"></td></tr><tr><td>
<input type=text onkeydown="event.keyCode = (event.keyCode == 13)?9:event.keyCode;"></td><td>
<input type=text onkeydown="event.keyCode = (event.keyCode == 13)?9:event.keyCode;"></td></tr>

--------------------------------------------------------------------------------

在你的head里加入以下代码
<head>
<script>
document.onkeydown = function(){event.keyCode = (event.keyCode == 13)?9:event.keyCode;}
//上面是js的3目表达式，当按下的键是回车就转成tab，否则还按原按键走
</script>
</head>

--------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
function init(){
   var ta=document.all.textf;
   for(var i=0;i<12;i++){
     document.getElementById("textf"+i).onkeydown=function (){   
  if(event.keyCode == 13){
     var textid=Number(this.id.substring(5,this.id.length))+4;
     if(textid<12) document.getElementById("textf"+textid).focus();
  }
}
   }
}
</script>
</head>
<body onLoad="init();">
<input type=text id="textf0"  >
<input type=text id="textf1" >
<input type=text id="textf2" >
<input type=text id="textf3" ><br/>
<input type=text id="textf4"  >
<input type=text id="textf5" >
<input type=text id="textf6" >
<input type=text id="textf7" ><br/>
<input type=text id="textf8"  >
<input type=text id="textf9" >
<input type=text id="textf10" >
<input type=text id="textf11" >
</body>
</html>

--------------------------------------------------------------------------------

上面是按enter跳到下行。要是相当于tab键
function init(){
   var ta=document.all.textf;
   for(var i=0;i<12;i++){
     document.getElementById("textf"+i).onkeydown=function (){
   event.keyCode = (event.keyCode == 13)?9:event.keyCode;
}
   }
}

--------------------------------------------------------------------------------

if (event.keyCode==13)
event.keyCode=9;
前天刚学的。

--------------------------------------------------------------------------------

是不是?面每?input都要韵一?id,而不是需要的才韵id?

--------------------------------------------------------------------------------

如果有?input在一?件才?锢示╋那?有影???呃?要韵id??循?的i值可韵多???因?我的input的?量不催定。hidden的input要韵id??一?<td>里有2?input有影???

--------------------------------------------------------------------------------

id韵?id="abcde<%=j++%>"呃?的?量名?╋光?不?往下跳╋也不?了。要他往下跳╋比蒉麻?╋侦有好方法?

--------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
function init(){
   var ta=document.all.abcde;
   for(var i=0;i<100;i++){
     document.getElementById("abcde"+i).onkeydown=function (){   
  if(event.keyCode == 13){
     var textid=Number(this.id.substring(5,this.id.length))+2;
     if(textid<100) document.getElementById("abcde"+textid).focus();
  } }   } }
</script>
</head>
<body onLoad="init();">   
  
  <table >   
   <tr>
      <td nowrap>  aa
        <input type="hidden" name="unit22192"  value="aa">
        </td>
  <td nowrap> 50
        <input type="hidden" name="oli_qty22192"  value="50">
        </td>
  <td nowrap>  
        <input type=text id="abcde1" name="qty22192" value="" >
        </td>
      <td nowrap>
        <input type=text id="abcde2" name="remark22192" value="" >
        </td>
    </tr>
   
    <tr >
      <td nowrap>  aa
        <input type="hidden" name="unit22237" value="aa">
       </td>
  <td nowrap> 75
        <input type="hidden" name="oli_qty22237"  value="75">
        </td>
  <td nowrap>  
        <input type=text id="abcde3" name="qty22237" value="" >
        </td>
      <td nowrap>
        <input type=text id="abcde4" name="remark22237" value="" >
       </td>
    </tr>
   
    <tr >
      <td nowrap> aa
        <input type="hidden" name="unit22328"   value="aa">
        </td>
  <td nowrap> 33
        <input type="hidden" name="oli_qty22328"   value="30">
        </td>
  <td nowrap>
        <input type=text id="abcde5" name="qty22328"  value="" >
        </td>
      <td nowrap>  
        <input type=text id="abcde6" name="remark22328"  value="" >
        </td>
    </tr>
   
  </table>
</form>
</body>
</html>
我呃??何不行╋邋在哪里?
作者: tzlink    时间: 2007-10-6 10:22
如何利用回车来进行焦点转移呢

用户在第一个输入框输入完以后，按回车键如何自动转移到第二个输入框在焦点呢？
依然是100分求解！！！
---------------------------------------------------------------

<input onkeydown="if(event.keyCode==13)event.keyCode=9">
<input onkeydown="if(event.keyCode==13)event.keyCode=9">
<input onkeydown="if(event.keyCode==13)event.keyCode=9">
<input onkeydown="if(event.keyCode==13)event.keyCode=9">
<input>

---------------------------------------------------------------
<body onkeydown="if(event.keyCode==13)event.keyCode=9">



欢迎光临 站长论坛 (http://www.tzlink.com/bbs/) Powered by Discuz! X3.2