卿你三世又何妨
2015-09-28 16:40
采纳率: 50%
浏览 4.0k

js如何实现让文本框输入文字之后,鼠标离开文本框,而文本框输入的字体还在

js如何实现让一个带有背景图片的网站的文本框输入文字之后,鼠标离开文本框,而文本框输入的字体还在,同时与背景相结合,就跟QQ输入个性签名那种效果一样的,就大神给代码

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • 紫气天堂 2015-09-29 09:20
    已采纳

    把input框隐藏,然后把值放在图片上

    点赞 打赏 评论
  • beaconD 2015-09-29 00:47

    离开的时候,把文本框隐藏,吧文本框的字取出来放在图片上

    点赞 打赏 评论
  • align520 2015-09-29 01:51

    例子在这里:
    <!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;}



    聚焦型提示语消失

    注册邮箱 密码

    输入型提示语消失

    注册邮箱 密码



    点赞 打赏 评论
  • suchen9209 2015-09-29 01:59

    就是把焦点离开的时候把输入文本框隐藏掉,然后在同一个位置放一个背景透明的div放输入的文字就可以

    点赞 打赏 评论
  • save4me 2015-09-29 02:37

    你可以在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, '&quot;') + '" onblur="setToPlain(this)"/>';
        }
        function setToPlain(ipt) {
            ipt.parentNode.innerHTML = ipt.value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
        }
    </script>
    
    点赞 打赏 评论

相关推荐 更多相似问题