div仿textarea可输入
原本要用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可输入的更多相关文章
- DIV仿textarea文本域,contenteditable如何只能输入纯文本
对于支持HTML5浏览器有2种方法: 1. HTML5 <div contenteditable="plaintext-only"></div> 2. C ...
- div仿textarea使高度自适应
今天真的有些无语,在百度上找了很多关于textarea和input高度自适应的代码,并且考虑到了要判断textarea的滚动条,从而动态改变它的高度,直到我搜索了这个让我目瞪狗呆的办法…… <d ...
- div仿textarea
CSS代码: .test_box { width: 400px; min-height: 120px; max-height: 300px; _height: 120px; margin-left: ...
- 监听文本框输入开发仿新浪微博限制输入字数的textarea插件
监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...
- jquery插件——仿新浪微博限制输入字数的textarea
内容链接地址:http://www.cnblogs.com/jone-chen/p/5213851.html: <!DOCTYPE html> <html> <head& ...
- 使用contenteditable+div模拟textarea文本域实现高度自适应
使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...
- div仿checkbox表单样式美化及功能
div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...
- H5新增属性contenteditable(不用JS,实现div模拟textarea高度自增长)
无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...
- div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...
随机推荐
- 3.26-3.31【cf补题+其他】
计蒜客)翻硬币 //暴力匹配 #include<cstdio> #include<cstring> #define CLR(a, b) memset((a), (b), s ...
- [19/04/03-星期三] IO技术_其它流(RandomAccessFile 随机访问流,SequenceInputStream 合并流)
一.RandomAccessFile 随机访问流 [版本1] /* *RandomAccessFile 所谓随机读取就是 指定位置开始或指定位置结束 的读取写入文件 * 实现文件的拆分与合并 模拟下载 ...
- MyBatis(7)高级查询
本次全部学习内容:MyBatisLearning 高级查询: 对于整体的工程是时候增加一点文件了: 具体用到那个类再去说明类的内容 一对一查询: 1.resultType进行实现: 执行的sq ...
- Windows环境下ELK简单搭建记录
前言 ELK已经是一套成熟的日志解决方案,虽然出现了好久,今日才终于研究了一下,不过是在windows平台上安装的. 搭建步骤 下载软件 安装软件 修改配置文件 启动软件 集成测试 下载软件 首先从官 ...
- ASP.NET Web API编程——接口安全与角色控制
1 API接口验证与授权 JWT JWT定义,它包含三部分:header,payload,signature:每一部分都是使用Base64编码的JSON字符串.之间以句号分隔.signature是”h ...
- Filter实现字符集统一设置
Filter实现字符集统一设置 其实是对request和response请求进行了拦截 1.创建Filter类,实现javax.Servlet接口 doFilter方法 //设置字符集 request ...
- PAT——1045. 快速排序
著名的快速排序算法里有一个经典的划分过程:我们通常采用某种方法取一个元素作为主元,通过交换,把比主元小的元素放到它的左边,比主元大的元素放到它的右边. 给定划分后的N个互不相同的正整数的排列,请问有多 ...
- 火狐中jq的attr出现的bug问题用prop代替
再工作的时候遇到一个很奇怪的问题 ,就是attr属性不好使!就问度娘去了...... 结果如下: .prop() 1..prop( propertyName ) 获取匹配集合中第一个元素的Prop ...
- HDU 2082 找单词 (普通型 数量有限 母函数)
传送门: http://acm.hdu.edu.cn/showproblem.php?pid=2082 找单词 Time Limit: 1000/1000 MS (Java/Others) Me ...
- 第24章 QSPI—读写串行FLASH
本章参考资料:<STM32F76xxx参考手册>.<STM32F76xxx规格书>.库帮助文档<STM32F779xx_User_Manual.chm>及<S ...