input得到焦点显示文本框,失去焦点隐藏文本框

您所在的位置:网站首页 隐藏input文本框的边框在哪 input得到焦点显示文本框,失去焦点隐藏文本框

input得到焦点显示文本框,失去焦点隐藏文本框

2023-11-19 09:40| 来源: 网络整理| 查看: 265

上一篇 : input 输入的内容时更改input的宽度

此篇是上一篇的延伸功能

input得到焦点显示文本框,失去焦点隐藏文本框

思路 : 1 创建一个文本标签font和输入标签input,页面加载时文本显示,输入框隐藏,文本框得到焦点时,文本框隐藏,并将文本框的内容赋值到输入框,输入框显示,失去焦点时,文本框隐藏,文本框里的内容赋值到输入框,输入框显示,该输入的文字,可以存入数据库,以遍下次刷新时显示最新的内容 2.有时候页面加载的时候会没有内容,导致初始化font没有内容,他的宽为0,不能够触发事件,所以初始化时在font里加入2个空格,以便于能够触发事件 jsp

功能实现:;;$nbsp;

js

var itext_c; function cc(){ //显示文本框并获取聚点 $('.inpc').show().focus(); //隐藏font标签 $(.textc).hide(); //获取font内的内容 otext_c = $('.textc').html(); if(otext_c.indexOf(";;") == 0){ str = otext_c.replace("\;\;",""); //把值传给输入框 $('.inpc').vla(str); }else{ //把值传给输入框 $('.inpc').vla(itext_c); } $('.inpc').off();//解除绑定 $('.inpc').blur(function(){ //隐藏文本框 $('inpc').hide(); //显示font标签 $('.textc').show(); //文本框失去聚点时触发js var inpt = $('.inpc').val(); if(otext_c != inpt){ //把文本框的值传到font标签 $('.textc').html($('.inpc').val() == "" ? '无' :$('.inpc').val()); $.post("url路径",{"key": key ,"value" : $('.textc').html(), function(obj){ if(obj == 1){ alert("修改成功"); }else{ alert("服务器异常!"); return false; } } ); } }); }


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3