Dùng phím Tab để tự động thêm record 2007-07-12 12:10:50
Dưới đây là 1 trang demo việc dùng phím Tab để tự động thêm record, TG xem qua rồi code lại = php
để cho đúng với yêu cầu bạn salem.
<?
<html><head><title>Add ++</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="cache-control" content="no-cache">
</head>
<script type="text/javascript">
var i=1;
function mAdd()
{
var af = " Ho ten : <input type='text' name='ht"+i+"'>"
+" Sinh nhật : <input name='sn"+i+"' type='text' value='' /><br>";
document.doc.insertAdjacentHTML("BeforeEnd", af);
tp = "document.doc.ht"+i;
eval(tp).focus();
i++;
}
</script>
<body onload="document.doc.ht0.focus();" >
<form name="doc" >
Họ tên : <input type="text" name='ht0' >
Sinh nhật : <input type="text" name='sn0' ><br>
</form>
<input type="button" style="width: 0px; height: 0px" onfocus="mAdd();this.blur();" value="Thêm mới" name="active">
<span id="ssthongbao" > Tab thoải mái</span>
</body></html>
?>
Nói thêm một chút :
Để xử lý phím Tab có một chút tiểu xảo :
<?
<input type="button" style="width: 0px; height: 0px" onfocus="mAdd();this.blur();" value="Thêm mới" name="active">
?>
dùng thêm một thẻ input ở sau thẻ form như trên.
Mỗi khi bấm nút tab các phần tử của form sẽ lần lượt được chọn, khi nào hết thì đến lượt input cuối, lúc này ta bắt lấy sự kiện onfocus của nó để làm cái việc mà ta muốn.
Để dấu cái input này thiết lập như sau:
<? style="width: 0px; height: 0px" ?>
không được dùng thuộc tính visibility hoặc là display.
Còn cách dùng onkeyup như tác giả đã nêu uoon đã cố gắng thư nhưng vẫn chưa hoàn thiện, nó có thể đẻ ra đúng như demo ở trên nhưng mà để nhập dữ liệu thì phải dùng chuột để click vào record mới, chứ nó không nhận tự động được.
Thân
uoon
Tra loi 4 comment(s) 2007-07-12 12:10:50
ttnhon 2007-07-20 20:02:16
Tra loi
SAD 2008-07-06 11:44:41
<html>
<head>
<title>Add ++</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script type="text/javascript">
function mAdd(i,name)
{
var doc = " Ho ten : <input type='text' name='ht"+i+"' id='ht"+i+"'>"
+" Sinh nhật : <input name='sn"+i+"' type='text'/><br>";
var tam = "<input type=\"button\" style=\"width:0; height:0; border:0;\" onfocus=\"mAdd("+(i+1)+",'ht"+(i+1)+"');\">";
document.all['nd'].innerHTML = document.all['nd'].innerHTML + doc;
document.all[name].focus();
document.all['tam'].innerHTML = tam;
}
</script>
<body onload="document.all['ht0'].focus();" >
<form name="doc" >
<div id="nd">
Họ tên : <input type="text" name='ht0' id="ht0">
Sinh nhật : <input type="text" name='sn0'><br>
</div>
</form>
<div id="tam">
<input type="button" style="width:0; height:0; border:0;" onfocus="mAdd(1,'ht1');">
</div>
<span id="ssthongbao" > Tab thoải mái</span>
</body>
</html>
Tra loi
123456 2009-02-10 10:37:42
Tra loi
uoon 2009-02-11 12:07:51
<?php
<html>
<head><title>add++</title>
<meta http-equiv=content-type content="text/html; charset=utf-8">
<meta http-equiv=cache-control content=no-cache>
<meta http-equiv=pragma content=no-cache>
<meta http-equiv=expires content=0>
<style type="text/css">
body {
margin-top: 50px;
margin-left: 20px;
}
.hidden {
border: 0px;
width: 0px;
height: 0px;
}
</style>
<head>
<script type="text/javascript">
var i=1;
function hfAdd()
{
var csHTML = " Họ và tên: <input type='text' name='ht"+i+"'>"
+ " Ngày sinh : <input type='text' name='sn"+i+"'>";
var new_div = document.createElement("div");
new_div.innerHTML = csHTML;
document.getElementById("doc").appendChild(new_div);
var pointReference = "document.doc.ht"+i;
eval(pointReference).focus();
i++;
}
</script>
<body >
<div>Tab thoải mái : </div>
<form name="doc" id="doc">
<div>
Họ và tên: <input type="text" name='ht0' >
Ngày sinh : <input type="text" name='sn0' >
</div>
</form>
<input type="button" class="hidden" onfocus="hfAdd();this.blur();">
<div> Demo by uoon. </div>
</body>
</html>
?>
Bạn test thử xem.
Tra loi
Y kien