1.布局
//html
<input id="timeInput" class="timeInput" placeholder="设置秒数" size="7" maxlength="10" οnkeyup="this.value=this.value.replace(/\D/g,'')"/>
1.样式
//CSS
.process-text input{
position: relative;
background: transparent;
height: 100%;
font: bold;
outline:none;
z-index: 10;
}
.process-text input:read-only {
border: 2px solid cadetblue;
}
2.逻辑
//JS
$(".timeInput").on("focus", function(){
$(this).attr("readonly", "readonly");
});
$(".timeInput").on("blur", function(){
$(this).css("border", "").removeAttr("readonly");
});
$(".timeInput").keydown(function(event){
$this = $(this);
if(event.which == "13") {
if("" === $(this).val())
{
return;
}
$(".video")[0].currentTime = $(this).val();
$video.play();
$(this).val("");
}
if(57 >= event.keyCode && 48 <= event.keyCode)
{
$this.val($this.val() + (event.keyCode-48).toString());
}
});