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>
CSS代码:
1 .textareadiv{border:1px #ad0d0d solid;resize: none;height:97px;width:671px;padding:9px;color:#848484;font-size:12px;overflow:auto;}
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 }
到这里终于可以完工了,也该下班休息了,呵呵呵!