js如何实现让一个带有背景图片的网站的文本框输入文字之后,鼠标离开文本框,而文本框输入的字体还在,同时与背景相结合,就跟QQ输入个性签名那种效果一样的,就大神给代码
把input框隐藏，然后把值放在图片上
离开的时候，把文本框隐藏，吧文本框的字取出来放在图片上
例子在这里：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
文本框输入值文字消失 $(document).ready(function(){ $("#focus .input_txt").each(function(){ var thisVal=$(this).val(); //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示 if(thisVal!=""){ $(this).siblings("span").hide(); }else{ $(this).siblings("span").show(); } //聚焦型输入框验证 $(this).focus(function(){ $(this).siblings("span").hide(); }).blur(function(){ var val=$(this).val(); if(val!=""){ $(this).siblings("span").hide(); }else{ $(this).siblings("span").show(); } }); }) /*输入型提示语消失*/ $("#keydown .input_txt").each(function(){ var thisVal=$(this).val(); //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示 if(thisVal!=""){ $(this).siblings("span").hide(); }else{ $(this).siblings("span").show(); } $(this).keyup(function(){ var val=$(this).val(); $(this).siblings("span").hide(); }).blur(function(){ var val=$(this).val(); if(val!=""){ $(this).siblings("span").hide(); }else{ $(this).siblings("span").show(); } }) }) }) form{width:400px;margin:10px auto;border:solid 1px #E0DEDE;background:#FCF9EF;padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;} label{display:block;height:40px;position:relative;margin:20px 0;} span{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;} .input_txt{width:398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;text-indent:10px;} .input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;} .border_radius{border-radius:5px;color:#B00000;} h2{font-family:"微软雅黑";text-shadow:1px 1px 3px #fff;}
聚焦型提示语消失
注册邮箱 密码
输入型提示语消失
注册邮箱 密码
就是把焦点离开的时候把输入文本框隐藏掉，然后在同一个位置放一个背景透明的div放输入的文字就可以
你可以在text类型的input中绑定blur事件，在事件中你可以有两种选择，一种是把Input隐藏掉，然后把input的文本取出放到div或者span之类的元素里显示。另一种就是直接把Input的边框去掉
<div onclick="setToEdit(this)">文字。。。。</div>
<script>
function setToEdit(dv) {
if (dv.getElementsByTagName('input').length == 0)
dv.innerHTML = '<input type="text" value="' + dv.innerHTML.replace(/"/g, '"') + '" onblur="setToPlain(this)"/>';
}
function setToPlain(ipt) {
ipt.parentNode.innerHTML = ipt.value.replace(/</g, '<').replace(/>/g, '>');
}
</script>