• div仿textarea可输入


    原本要用textarea,但是后来发现好像只有IE支持textarea里边使用html标签,由于需要在textarea中显示一条横线(<hr />),在网上查了很久,都说textarea是纯文本不能使用html标签,但是可以换成div代替,这下就方便多了,因此放弃textarea,代码如下:

    html代码:

    1 <div class="textareadiv">
    2                 <div id="txtSayWords" contenteditable="true" onfocus="AutoContents('in')" onblur="AutoContents('out')">输入您要说的话...不少于10个字</div>
    3                 <div id="replydiv"></div>
    4                 </div>
    html

    CSS代码:

    1 .textareadiv{border:1px #ad0d0d solid;resize: none;height:97px;671px;padding:9px;color:#848484;font-size:12px;overflow:auto;}
    CSS

    JS代码:

     1 var defaultVal = "输入您要说的话...不少于10个字"; //默认文本框内容
     2 function AutoContents(type) {
     3     var txtVal = $("#txtSayWords").html(); //文本框获取或失去焦点时的文本框内容
     4     //文本框获取焦点
     5     if (type == "in") {
     6         //主动说话操作
     7         if (txtVal == defaultVal) {//表示内容为空
     8             //清空文本框
     9             $("#txtSayWords").html("");
    10         }
    11     } else if (type == "out") {//文本框失去焦点
    12         //如果内容为除去默认值以外的值,则需自动填充默认值+除默认值以外的
    13         //主动说话操作
    14         if (txtVal == "") {//没有输入内容
    15             //如果焦点离开文本框时内容为空,表示没有输入任何内容,则需自动填充默认值
    16             $("#txtSayWords").html(defaultVal);
    17         }
    18     }
    19 }
    JS

    到这里终于可以完工了,也该下班休息了,呵呵呵!

  • 相关阅读:
    字体图标的制作
    vs code 本地调试配置
    瀑布流
    web组件化开发第一天
    超时调用和间歇调用
    递归 闭包
    继承
    面向对象的程序设计
    function类型
    Date类型
  • 原文地址:https://www.cnblogs.com/CatHeadTiger/p/3527326.html
Copyright © 2020-2023  润新知