今天简单的实现一个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");
}
})
}
希望对你有帮助