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

本文介绍了一个简单的商品统一编号查询功能实现过程,包括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>
<!--将jquery-1.7.1.min.js文件与当前的这个html文件放入到同一个文件夹内即可-->
<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>
### 解决 `el-input-number` 组件默认值为 0 并实现点击后自动清空 对于 `el-input-number` 组件,默认情况下即使设置了 `v-model` 的绑定变量为 `undefined` 或者其他非数值类型,组件仍会显示最小值(通常是 0)。为了实现在用户首次交互能够将该值清空的效果,可以通过监听用户的输入事件并手动控制状态。 一种方法是在 Vue 实例的数据对象中定义一个标志位用于跟踪是否已经发生过一次有效的用户操作。当检测到第一次有效改变,允许其变为 `null` 或者其他的占位符表示无具体数值的状态[^1]。 下面是一个具体的解决方案: #### HTML 部分 ```html <template> <div> <!-- 使用 change 事件处理程序 --> <el-input-number v-model="model.entity.num" :min="1" :max="10" @change="handleChange" label="描述文字"> </el-input-number> </div> </template> ``` #### JavaScript (Vue) 部分 ```javascript export default { data() { return { model: { entity: { num: undefined, // 初始状态下设置为 undefined isFirstChange: true // 添加标记属性判断是否初次更改 } } }; }, methods: { handleChange(value) { if(this.model.entity.isFirstChange && value === this.$refs.inputNumber.min){ this.model.entity.num = null; this.model.entity.isFirstChange = false; } else { this.model.entity.isFirstChange = false; } } } } ``` 此代码片段展示了如何通过监听 `@change` 事件,在满足特定条件的情况下重置 `num` 属性至 `null` 来达到视觉上的“清空”。注意这里假设了 `this.$refs.inputNumber.min` 可访问当前控件的最小值;实际应用可能需要调整获取方式取决于框架版本或其他因素[^2]。 另外需要注意的是,由于浏览器端渲染机制的不同以及 Element UI 版本差异等因素的影响,上述逻辑可能会有所变化,请根据实际情况适当调试优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值