Jquery改变输入键按下制表键
Posted
技术标签:
【中文标题】Jquery改变输入键按下制表键【英文标题】：Jquery change enter key press to tab key 【发布时间】：2016-04-19 09:12:34 【问题描述】：我制作了一个数据输入页面。这个页面有几个输入框。目前，当用户在输入框中输入数据后按下回车键时，表单被提交。只有当焦点在提交按钮上时，我才想在按返回键时启用表单提交。否则它应该移动到下一个输入。我尝试了几种方法，没有任何效果。请推荐一个方法
<?php
session_start();
require_once('Connections/hari.php');
$dateindian = date('d-m-Y');
$dateus = date('Y-m-d');
if (isset($_SESSION['EMPNO']))
$ECNO = $_SESSION['EMPNO'];
mysql_select_db($database_hari, $hari);
$auth_sql2 = "SELECT pdw FROM users WHERE emp_no='$ECNO'";
$result2 = mysql_query($auth_sql2)or die(mysql_error());
$row2 = mysql_fetch_array($result2);
$count = mysql_num_rows($result2);
$_SESSION['pdw_priv'] = $row2['pdw'];
mysql_free_result($result2);
if ($count == 0 or $_SESSION['pdw_priv'] == 'N')
header('Location:unauthorised.php');
exit();
else
header('Location:esl_login.php');
exit();
?>
<!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">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>System Efficiency for Alpha/Beta Counters : : ESL, KAIGA</title>
<link rel="stylesheet" href="css/home_style_login.css" type="text/css" />
<link rel="stylesheet" href="css/water_quality.css" type="text/css" />
<link href="/DatePicker.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="js/jquery-ui-1.10.4.custom/css/smoothness/jquery-ui-1.10.4.custom.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="../dist/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery.validator.setDefaults(
submitHandler: function ()
var usin = jQuery('#usin').val();
var user = jQuery('#user').val();
var ph = jQuery('#ph').val();
var conductivity = jQuery('#conductivity').val();
var hardness = jQuery('#hardness').val();
var tds = jQuery('#tds').val();
var turbidity = jQuery('#turbidity').val();
var alkalinity = jQuery('#alkalinity').val();
var chloride = jQuery('#chloride').val();
jQuery.post("scripts/water_qual_add.php",
"usin": usin,
"user": user,
"ph": ph,
"conductivity": conductivity,
"hardness": hardness,
"tds": tds,
"turbidity": turbidity,
"alkalinity": alkalinity,
"chloride": chloride
, function (data)
jQuery('#dialog-message').html(data);
jQuery('#dialog-message').dialog('open');
return false;
//jQuery('#usin').focus();
);
);
jQuery(document).ready(function ()
jQuery('.wql').keydown(function (e)
if (e.which === 13)
var index = jQuery('.wql').index(this) + 1;
jQuery('.wql').eq(index).focus();
);
jQuery("#dialog-message").dialog(
autoOpen: false,
modal: true,
buttons:
Ok: function ()
jQuery(this).dialog("close");
jQuery('#eff_entry').each(function ()
this.reset();
);
jQuery('#usin').focus();
);
jQuery("#datepicker").datepicker(
changeMonth: true,
changeYear: true,
dateFormat: "dd-mm-yy",
altFormat: "yy-mm-dd",
altField: "#stddate"
);
jQuery('#usin').focus();
jQuery("#eff_entry").validate();
jQuery("#usin").change(function ()
var usin = jQuery('[name="usin"]').val();
jQuery.post("get_sample_details.php",
"usin": usin
, function (data)
if (data.msg)
// message_box.show_message(data.msg,'Please Enter a valid no.');
alert(data.msg);
jQuery('#usin').focus();
else
jQuery('#submit_btn').show();
jQuery('#comment').hide();
jQuery('#doc').val(data.date);
jQuery('#desc').val(data.description);
jQuery('#loc').val(data.location);
);
);
);
function RoundIt(Value)
return(Math.round(Value * 100)) / 100;
</script>
<style type="text/css">
.usin
background-color:#FFFF99;
color:#FF0000;
#rawdateposition:absolute;
float:left;
width:500px;
#calculated
float:right;
width:300px;
#eff_entry label.error, #eff_entry input.submit margin-left: 110px; font-size:10px; color:#FF0000;
#commentdisplay:none;
.no-close .ui-dialog-titlebar-close display: none;
div.ui-dialog
font-size:12px;
</style>
<body onkeydown="if (event.keyCode == 13)
event.keyCode = 9;
return event.keyCode;
">
<!-- DO NOT MOVE! The following AllWebMenus linking code section must always be placed right AFTER the BODY tag-->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR enviro_menu ******** -->
<script type="text/javascript">
var MenuLinkedBy = "AllWebMenus [4]", awmMenuName = "enviro_menu", awmBN = "766";
awmAltUrl = "";
</script>
<script charset="UTF-8" src="enviro_menu.js" type="text/javascript"></script>
<script type="text/javascript">awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR enviro_menu ******** -->
<div id="main">
<div id="masthead">
</div>
<div id="dummy"></div>
<!-- end masthead -->
<div id="content">
<div id="welcome">Welcome <?php echo $_SESSION['EMPNAME']; ?></div>
<hr class="noscreen" />
<form id="eff_entry" name="eff_entry" action="" >
<fieldset>
<div id="rawdata">
<legend>Water Quality Parameters</legend>
<label for="usin">USIN</label>
<input name="usin" id="usin" type="text" class="usin" onblur="this.value = this.value.toUpperCase()" required/>
<br />
<br/>
<label for="ph">pH</label>
<input class= "wql" name="ph" id="ph" value='0.0' required />
<label for="conductivity">Conductivity</label>
<input name="conductivity" id="conductivity" value='0.0' required />
<br />
<label for="tds">TDS</label>
<input class= "wql" name="tds" id="tds" value='0.0' required/>
<br/>
<label for="turbidity">Turbidity</label>
<input class= "wql" name="turbidity" id="turbidity" value='0.0' required />
<br/>
<label for="chloride">Chloride</label>
<input class= "wql" name="chloride" id="chloride" value='0.0' required />
<br/>
<label for="alkalinity">Alkalinity</label>
<input class= "wql" name="alkalinity" id="alkalinity" value='0.0' required />
<br />
<label for="hardness">Hardness</label>
<input class= "wql" name="hardness" id="hardness" value='0.0' required/>
<label for="user"> Data Entered By</label>
<input id="user" name="user" style="color:#FF0000; background-color:#FFFF33; font-weight:bold" onfocus="this.blur();" onselectstart="event.returnValue=false;" value= "<?php echo $_SESSION['EMPNO']; ?>" />
<br/>
<br/>
<div align="center">
<input id="submit_btn" type="submit" name="submit" value="Submit" />
</div>
</div>
<div id="calculated">
<label for="loc">Location</label>
<input readonly="readonly" name="loc" id="loc" /><br/>
<label for="desc">Type</label><br/>
<input readonly="readonly" name="desc" id="desc" /><br/>
<label for="doc"> Date of Collection</label><br/>
<input readonly="readonly" name="doc" id="doc" /><br/>
</div>
</fieldset>
</form>
<div id="type2"></div>
</div>
</div>
<!--end content -->
<!--end navbar -->
<div id="siteInfo"><?php include('footer.php'); ?> </div>
<br />
</div>
<div id="dialog-message" class="dialog" title="Water Quality Data Entry"></div>
</body>
</html>
在 *** 中搜索了类似的问题后，我发现这完成了一半的工作。
jQuery('.wql').keypress(function(e)
if ( e.which == 13 )
e.preventDefault();
);
但这会阻止表单提交，但不会将焦点移到下一个输入。有什么方法吗？
【问题讨论】：
也永远不要在name="submit"表单中调用任何东西，如果你需要它会破坏提交处理程序
你还有一个内联处理程序——这不是一个好主意。 （重新）移动它：<body onkeydown="if (event.keyCode == 13) event.keyCode = 9; return event.keyCode; ">
查看此链接：***.com/questions/1009808/…
我删除了它@mplungjan
@PrashantPatil 我尝试了这里给出的几个选项，但没有任何效果
【参考方案1】：
你需要这样的东西，这是Jquery focus on next element with class的返工
请注意，并非所有输入都具有允许在输入时使用制表符的类，包括提交
$(function ()
var $fields = $('.wql');
$fields.on("keypress",function (e)
console.log(e.which,$(this).next('.wql').attr("id"));
if (e.which === 13 && this.id ="submit_btn")
e.preventDefault();
var idx = $fields.index(this);
$fields.eq(idx+1).focus();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
<div id="welcome">Welcome
<?php echo $_SESSION[ 'EMPNAME']; ?>
</div>
<hr class="noscreen" />
<form id="eff_entry" name="eff_entry" action="">
<fieldset>
<div id="rawdata">
<legend>Water Quality Parameters</legend>
<label for="usin">USIN</label>
<input name="usin" id="usin" type="text" class="usin wql" onblur="this.value = this.value.toUpperCase()" required/>
<br />
<br/>
<label for="ph">pH</label>
<input class="wql" name="ph" id="ph" value='0.0' required />
<label for="conductivity">Conductivity</label>
<input class="wql" name="conductivity" id="conductivity" value='0.0' required />
<br />
<label for="tds">TDS</label>
<input class="wql" name="tds" id="tds" value='0.0' required/>
<br/>
<label for="turbidity">Turbidity</label>
<input class="wql" name="turbidity" id="turbidity" value='0.0' required />
<br/>
<label for="chloride">Chloride</label>
<input class="wql" name="chloride" id="chloride" value='0.0' required />
<br/>
<label for="alkalinity">Alkalinity</label>
<input class="wql" name="alkalinity" id="alkalinity" value='0.0' required />
<br />
<label for="hardness">Hardness</label>
<input class="wql" name="hardness" id="hardness" value='0.0' required/>
<label for="user">Data Entered By</label>
<input class="wql" id="user" name="user" style="color:#FF0000; background-color:#FFFF33; font-weight:bold" onfocus="this.blur();" onselectstart="event.returnValue=false;" value="<?php echo $_SESSION['EMPNO']; ?>" />
<br/>
<br/>
<div align="center">
<input id="submit_btn" type="submit" value="Submit" />
</div>
</div>
<div id="calculated">
<label for="loc">Location</label>
<input readonly="readonly" name="loc" id="loc" />
<br/>
<label for="desc">Type</label>
<br/>
<input readonly="readonly" name="desc" id="desc" />
<br/>
<label for="doc">Date of Collection</label>
<br/>
<input readonly="readonly" name="doc" id="doc" />
<br/>
</div>
</fieldset>
</form>
<div id="type2"></div>
</div>
</div>【讨论】：
以上是关于Jquery改变输入键按下制表键的主要内容，如果未能解决你的问题，请参考以下文章