JavaScript & jQuery การกดลูศร เพื่อควบคุมทิศทาง Focus ช่อง INPUT เป็นการกำหนดจำนวนคอลัมน์ และบวกลบตำแหน่ง index ของอีเลเมนต์แต่ละตัว เพื่อวิ่งไป Focus ในส่วนที่ต้องการจากการกดปุ่มลูกศรแต่ละครั้ง
Download Source Code
<?php include "mysql_connect.php";?>
<html>
<head>
<title>PHP MySQL กับการตั้งค่า INPUT Focus : SUNZANDESIGN.BLOGSPOT.COM</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.highlight {
background-color: #FFFF88;
}
.red{
color : red;
}
.blue{
color : blue
}
</style>
</head>
<body>
<div class="container">
<div class="header clearfix">
<h3 class="text-muted">
<span class="blue">PHP MySQL</span> การตั้งค่า
<span class="red">INPUT Focus</span>
: SUNZANDESIGN.BLOGSPOT.COM </h3>
</div>
<br/>
<div class="row">
<?php
$data = array();
$sql = "SELECT * FROM product ";
//echo $sql;
if ($result = $conn->query($sql)) {
while($row = $result->fetch_array(MYSQLI_ASSOC)){
$data[] = $row;
}
/* free result set */
$result->close();
}
$conn->close();
?>
<table class="table table-bordered">
<thead>
<tr>
<th>รหัส</th>
<th>ชื่อ</th>
<th>จำนวน</th>
<th>ราคา</th>
<th>รูปภาพ</th>
<th>หมายเหตุ</th>
</tr>
</thead>
<tbody>
<?php
foreach($data as $row){
?>
<tr>
<td><?php echo $row['ProductID'];?></td>
<td><?php echo $row['ProductName'];?></td>
<td>
<input class="qty detail"
value="<?php echo $row['Qty'];?>" /></td>
<td>
<input class="price detail"
value="<?php echo number_format($row['Price'],2);?>" />
</td>
<td><input value="<?php echo $row['Picture'];?>" /></td>
<td><textarea></textarea></td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div><!-- container -->
<footer class="footer">
<br/><br/>
<div class="container">
<i>ติดตามความเคลื่อนไหวได้ที่ :: <a href='https://www.facebook.com/ToBeDeveloper'>https://www.facebook.com/ToBeDeveloper</a></i>
</div>
</footer>
</div> <!-- /container -->
<script src="js/jquery.min.js"></script>
<script src="js/highlight.js"></script>
<script>
/*
$('input.price, input.qty').each(function(index) {
var tabindex = index + 1;
$(this).attr("tabindex", tabindex);
$(this).addClass('red');
});
*/
$('.detail').keydown(function(e) {
var pos = $(this).index('input.detail');
console.log(pos);
console.log("KEY : " + e.keyCode);
if (e.keyCode==37) {//Left
pos= pos-1;
$( "input.detail:eq("+ pos +")" ).focus();
}
if (e.keyCode==39) {//Right
pos= pos+1;
$( "input.detail:eq("+ pos +")" ).focus();
}
if (e.keyCode==38) {//UP
pos= pos-2;
$( "input.detail:eq("+ pos +")" ).focus();
}
if (e.keyCode==40) {//Down
pos= pos+2;
$( "input.detail:eq("+ pos +")" ).focus();
}
console.log(pos);
});
</script>
</body>
</html>
ความคิดเห็น
แสดงความคิดเห็น