上一篇 : input 输入的内容时更改input的宽度
此篇是上一篇的延伸功能
input得到焦点显示文本框,失去焦点隐藏文本框
思路 : 1 创建一个文本标签font和输入标签input,页面加载时文本显示,输入框隐藏,文本框得到焦点时,文本框隐藏,并将文本框的内容赋值到输入框,输入框显示,失去焦点时,文本框隐藏,文本框里的内容赋值到输入框,输入框显示,该输入的文字,可以存入数据库,以遍下次刷新时显示最新的内容 2.有时候页面加载的时候会没有内容,导致初始化font没有内容,他的宽为0,不能够触发事件,所以初始化时在font里加入2个空格,以便于能够触发事件
jsp
<div style="padding:10px 10px; font-size: 18px;caption-side:left;">功能实现:<font onmouseover = "cc();" class = "textc"> </font>$nbsp;<input class = "inpc" type = "text" style = "display:none;width:800px;height:40px;font-size:12pt;" value = ""></div>
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();//文本框失去聚点时触发jsvar 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;}});}});}
