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 ...
随机推荐
- bzoj2336 [HNOI2011]任务调度
Description 正解:搜索+随机化. 先写个搜索,枚举所有没有要求的任务属于哪一种任务,然后再用爬山来更新最优解. 具体来说就是先把所有先做任务$A$的按照$a$时间从大到小排序,先做任务$B ...
- UVa 753 - A Plug for UNIX(最大流)
链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- Windows彻底卸载系统自带的office
由于自带office导致按照新的office会提示要先卸载原来32位的office,又在控制面板或软件管理工具中找不到office,用如下方法删除 1.在C盘删除office文件夹 2.删除注册表 1 ...
- mongodb、parse-server、parse-dashboard 的启动命令
1.mongodb启动: 1$ C:\MongoDB\Server\bin>mongod --logpath d:\mongodb\logs\log.log $ C:\MongoDB\Serve ...
- PAT——1018. 锤子剪刀布
大家应该都会玩“锤子剪刀布”的游戏:两人同时给出手势,胜负规则如图所示: 现给出两人的交锋记录,请统计双方的胜.平.负次数,并且给出双方分别出什么手势的胜算最大. 输入格式: 输入第1行给出正整数N( ...
- HDU 2030 汉字统计(汉字Asics码为负,占两个char)
传送门: http://acm.hdu.edu.cn/showproblem.php?pid=2030 汉字统计 Time Limit: 2000/1000 MS (Java/Others) M ...
- WPF引用ActiveX提示没有注册类或不是有效的Win32程序
VS2017开发WPF时,需要引用UKey组件读取插入的Ukey编号和密钥 该组件在网页端调用时使用ObjectId进行ActiveX注册即可,后来做成WPF客户端进行读取遇到该问题. 解决: 右键项 ...
- 使用nuget过程中一些问题总结
更新System.Web.Http组件以及其相关依赖项使用以下命令更新: Update-Package Microsoft.AspNet.WebApi –reinstall 如果没有这个引用,则先添加 ...
- Unity 游戏框架搭建 (二十三) 重构小工具 Platform
在日常开发中,我们经常遇到或者写出这样的代码 var sTrAngeNamingVariable = "a variable"; #if UNITY_IOS || UNITY_AN ...
- redis存储数据的时候
使用redis存储数据的时候,有时候为了查看的方便,通常会有层级或者说是目录, 这时候我们在set的时候,需要将key值使用“:”的符号来区分层级关系,比如:set(“a:b”, “123”),那么在 ...