مشکل با فوکوس

[ferankyy]

سلام به همه اساتید

من یک textbox دارم که باید داخل آن یک عدد نوشته بشه ( از ۱ تا ۱۰‌) من میخوام کاربر این عدد را تایپ نکنه ، میخوام وقتی روی textbox کلیک کرد یک div زیر textbox باز بشه که بتوانند بین عدد ۱ تا ۱۰ یکی رو انتخاب کنند ( درست مثل datepicker ) حالا من داخل رویداد فوکوس تکست باکس گفتم این Div رو نشون بده و داخل رویداد Blur تکست باکس هم گفتم Div رو حذف کن . داخل Div هم ۱۰ تا دکمه گذاشتم مثل کیبورد مجازی ، حالا مشکل اینجاست که وقتی روی محتوای این div کلیک میکنم فورا بسته میشه ، چون تکست باکس از حالت فوکوس خارج میشه.
دوستان لطفا راهنمایی کنید .

[mr.wolf]

کلیت کارت درسته. فقط این تغییر رو بده:
برای رویداد blur بزن که یک تابع رو فراخوانی کنه.
توی تابع یک تایمر باشه با زمان مثلا 2 ثانیه.
به این ترتیب که بعد از گذشت 2 ثانیه div اعداد رو مخفی کنه.
و اگر در این بین روی دکمه های اعداد کلیک شد ، تایمر از بین بره.
حالا اگر از محدوده ی کادر اعداد هم موس دور شد MouseOut اون موقع بازم باید تایمر به کار بیفته.
سعی کردم کد کاملی باشه ، امیدوارم کمکت کنه.
تلفیقی از Jquery , Css , Php
فایل ضمیمه شده رو استفاده کن برای jquery

[mr.wolf]

<script language="javascript" src="jquery.js"></script>
<style type="text/css">
.InsertNumbers{
width:200px;
}
.Insert{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#900;
border:#CCC 1px solid;
padding:3px;
width:200px;
letter-spacing:2px;
text-align:left;
direction:ltr;
}
.Numbers{
background:#FFC;
padding:5px;
text-align:center;
border:#936 1px solid;
display:none;
}
</style>
<div class="InsertNumbers">
<input type="tel" class="Insert"/>
<div class="Numbers">
<?php for($i=0;$i<10;$i++){ ?>
<input type="button" value="<?php echo $i ?>">
<?php } ?>
</div>
</div>
<script language="javascript">
var HNumbers , HNumPer=1;

$('input.Insert').focus(function(){
$('.Numbers').slideDown(500);
clearTimeout(HNumbers);
});
$('input.Insert').blur(function(){
if(HNumPer==1)
HNumbers=setTimeout(function(){HideNumbers()},2000 );
});
$('.Numbers').mouseout(function(){
HNumbers=setTimeout(function(){HideNumbers()},2000 );
});
$('.Numbers').mouseover(function(){
clearTimeout(HNumbers);
HNumPer=0;
});
$('.Numbers input').click(function(){
clearTimeout(HNumbers);
HNumPer=0;
var Num=$('.Insert').val()+$(this).val();
$('.Insert').val(Num);
});
function HideNumbers()
{
HNumPer=1;
$('.Numbers').slideUp(500);
clearTimeout(HNumbers);
}
</script>