简单实现input框不输入默认传一个/或者0

最新推荐文章于 2022-07-02 12:02:32 发布

原创最新推荐文章于 2022-07-02 12:02:32 发布 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#简单实现input框不输入默认传一个值 #input传默认值

本文介绍了一种在layui框架下实现input框默认值显示与清除的方法，通过JavaScript焦点事件处理，确保用户交互流畅，避免默认值干扰。文章详细解析了如何根据不同情况（如点击、离开）调整input框内容。

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

今天简单的实现一个input框在不点击文本框的时候有一个value值传到后台，当点击input时会有文字提示请输入什么，我们先来看代码有什么坑

 <input type="text" maxlength="10" name="minmetalhole"  lay-verType="tips" lay-verify="" placeholder="请输入最小金属孔" autocomplete="off" class="layui-input input_inp23" value="/"/>
 <input type="text" maxlength="10" name="jxblindholefjx"  lay-verType="tips" lay-verify="" placeholder="请输入机械盲孔板费用" autocomplete="off" class="layui-input input_inp35" value="/"/>

这是里面的一些属性是layui框架的，这个我们先不管

首先我们来看一下JQ代码，我这里的循环是让每一个input都可以使用，这样就不用有一个input就要写一遍，当我们点击input时让他把input内容清空，这样用户就不用手动去删除默认给的/或0，当我不输入的时候默认值/或0还要在，这时候就这时候就需要做一个判断当我离开时是否有输入，当我点击时是否也有内容，就不会有我输入了内容离开后又被清掉的bug，也不会有当我点击时又出现/或0的问题。

// 循环遍历每一个input
	for(var i=1;i<=49;i++){
		fengzhuang_inp($(".input_inp"+i+""));
	}
	// 循环遍历每一个input
	for(var j=1;j<=9;j++){
		fengzhuang_inps($(".input_inps"+j+""));
	}
	// 点击input获取焦点时和失去焦点时
	function fengzhuang_inp(obj){
		obj.focus(function(){
			if(obj.val()=="/") {
				obj.val("");
			}else{
				obj.val();
			}	
		})
		obj.blur(function(){
			if (obj.val()!="") {
				obj.val();
			}else{
				obj.val("/");
			}
		})
	}
	// 点击input获取焦点时和失去焦点时
	function fengzhuang_inps(obj){
		obj.focus(function(){
			if(obj.val()=="0") {
				obj.val("");
			}else{
				obj.val();
			}
		})
		obj.blur(function(){
			if (obj.val()!="") {
				obj.val();
			}else{
				obj.val("0");
			}
		})
	}

希望对你有帮助