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

html代码:

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

html

CSS代码:

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

CSS

JS代码:

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

JS

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

div仿textarea可输入的更多相关文章

  1. DIV仿textarea文本域,contenteditable如何只能输入纯文本

    对于支持HTML5浏览器有2种方法: 1. HTML5 <div contenteditable="plaintext-only"></div> 2.  C ...

  2. div仿textarea使高度自适应

    今天真的有些无语,在百度上找了很多关于textarea和input高度自适应的代码,并且考虑到了要判断textarea的滚动条,从而动态改变它的高度,直到我搜索了这个让我目瞪狗呆的办法…… <d ...

  3. div仿textarea

    CSS代码: .test_box { width: 400px; min-height: 120px; max-height: 300px; _height: 120px; margin-left: ...

  4. 监听文本框输入开发仿新浪微博限制输入字数的textarea插件

    监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...

  5. jquery插件——仿新浪微博限制输入字数的textarea

    内容链接地址:http://www.cnblogs.com/jone-chen/p/5213851.html: <!DOCTYPE html> <html> <head& ...

  6. 使用contenteditable+div模拟textarea文本域实现高度自适应

    使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...

  7. div仿checkbox表单样式美化及功能

    div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...

  8. H5新增属性contenteditable(不用JS,实现div模拟textarea高度自增长)

    无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...

  9. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

随机推荐

  1. MATLAB入门学习(整合)

    整合一下,都是链接地址: MATLAB入门学习(一):初次使用.. MATLAB入门学习(二):矩阵相关 MATLAB入门学习(三):矩阵常用函数 MATLAB入门学习(四):编写简单.m文件和函数文 ...

  2. 【Hankson 的趣味题】

    可能我只适合这道题的50分 但还是要争取一下的 我们知道对于\(gcd\)和\(lcm\)有这样的定义 \(a=\prod _{i=1}^{\pi(a)}p_i^{d_{i}}\) \(b=\prod ...

  3. mongodb安装(比较全一点)

    Linux下MongoDB安装和配置详解  转:https://www.cnblogs.com/pfnie/articles/6759105.html 一.创建MongoDB的安装路径 在/usr/l ...

  4. imageNamed和dataWithContentsOfFile的区别(1)

    imageNamed和dataWithContentsOfFile的区别 imagecacheuiviewextensionprocessingxcode 最近老是受iphone内存问题的困扰,找了些 ...

  5. HTML5零散知识点总结

    1.产生ioc图标的网站: http://www.bitbug.net/ 链接ioc图标: <link rel="shortcut icon" type="imag ...

  6. Many-to-many relationships in EF Core 2.0 – Part 1: The basics

    转载这个系列的文章,主要是因为EF Core 2.0在映射数据库的多对多关系时,并不像老的EntityFramework那样有原生的方法进行支持,希望微软在以后EF Core的版本中加入原生支持多对多 ...

  7. js和jquery对象的相互转换

    在使用jquery的过程中发现很多需要将jquery对象转成js对象的例子. Query 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 ...

  8. 使用PIE.htc让万恶的IE内核浏览器IE6\7\8支持CSS3部分属性

    万恶的IE内核浏览器,这是多少前端程序员头疼的事情... 今天给大家介绍一下如何用 PIE.htc 来让IE浏览器支持CSS3的 border-radius.box-shadow.CSS3 Backg ...

  9. 大数据框架-HDFS

    HDFS:分布式文件系统,运行文件通过网络在多台主机分享的文件系统,分块写入(128M),适用于一次写入多次查询,不支持并发写(只能一块一块写),小文件不合适. nameNode(主节点,单个): 保 ...

  10. dva框架使用详解及Demo教程

    dva框架的使用详解及Demo教程 在前段时间,我们也学习讲解过Redux框架的基本使用,但是有很多同学在交流群里给我的反馈信息说,redux框架理解上有难度,看了之后还是一脸懵逼不知道如何下手,很多 ...