input获得光标时，默认值消失，移出光标，默认值显示

最新推荐文章于 2024-11-08 17:58:40 发布

原创最新推荐文章于 2024-11-08 17:58:40 发布 · 4.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #js #jquery

笔记—html/js/jquery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个简单的商品统一编号查询功能实现过程，包括HTML页面设计、使用jQuery绑定回车事件及焦点事件，确保用户正确输入商品编号并进行查询。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>demo</title>
</head>
<style type="text/css">
label {color:#b5b5b5}
</style>

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">

//定义一个默认值
var defaultVal = "请先输入商品统一编号，再回车进行查询操作！";
//个人理解是，页面加载完成后，会发生 ready 事件
$(document).ready(function(){

//回车事件
$("#seqNo").bind('keydown', function (e) {
//获得键值
var key = e.which;
//13 为回车键的键值
if (key == 13) {
//通过文本输入框id,得到这个文本输入框的值
var seqNo = $("#seqNo").val();
//当前的值不为默认值，并且不为空时，访问后台
if($.trim(seqNo) != defaultVal && $.trim(seqNo) != ""){
alert("正在查询，请稍等。。。");
//访问后台
//window.location.href="findDetail.action?param="+seqNo;
}else{
//否则提示用户
alert("请先输入商品统一编号，再进行回车查询操作");
}
}
});
});

//获得焦点事件，即鼠标光标移动到文本输入框内
function submitFocus(){
var seqNo = $("#seqNo").val();
//将其值与默认值比较，相等时，将文本输入框置空
if($.trim(seqNo) == defaultVal){
$("#seqNo").val("");
}
}

//失去焦点事件，即即鼠标光标从文本输入框内移出
function submitBlur(){
var seqNo = $("#seqNo").val();
//将文本框内的值去空格操作后，等于空时，将默认值设置到文本输入框内
if($.trim(seqNo) == ""){
$("#seqNo").val(defaultVal);
}
}
</script>
</head>
<body>
<label>测试步骤</label><br/>
<label>1 鼠标移到文本输入框内，不输入值，再移出</label><br/>
<label>2 鼠标移到文本输入框内，随意输入值，再移出</label><br/>
<label>3 鼠标移到文本输入框内，不输入值，敲回车键</label><br/>
<label>4 鼠标移到文本输入框内，输入值，敲回车键</label><br/><br/>
<input type="text" style="width:300px;color: #b5b5b5;margin-top: 1px;"
id="seqNo" value="请先输入商品统一编号，再回车进行查询操作！"
onfocus="submitFocus()" onblur="submitBlur()">
</body>