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 ...
随机推荐
- bzoj5152 [Wc2018]通道
题目链接 正解:不会做. 写一个爬山算法就过官方数据了(逃 具体来说就是每次随机一个根,然后迭代找最长路的那个点. 多随机几次取$max$就行了.正解以后再补.. #include <bits/ ...
- 洛谷 P4321 【随机漫游】
题目大意 给出\(n(n\leq 18)\)个点的无向连通图,\(m(m\leq 10^5)\)次询问.每次询问给出一个点集和一个起点\(s\),询问从\(s\)出发,经过这个点集中的每一个点至少一次 ...
- FRP-Functional Reactive Programming-函数响应式编程
响应式编程是一种面向数据流和变化传播的编程范式: 响应式编程和函数式编程的融合: 响应式编程为内核:函数式编程为工具: 流的概念先天适合函数式编程. Some quotes from the arti ...
- CentOS下go 安装
go 语言源码安装依赖 ,gcc ,make glibc库,等,上述工具安装省略,另外,其源代码更新采用的是mercurial 工具,安装前先安装mercureal : 1.mercurial安 ...
- Linux学习总结(十四) 文件的打包和压缩
文件的压缩和打包,在windos下我们很熟悉.rar和.zip文件,这是两种压缩文件,他们支持单个文件和多个文件的压缩.windos下我们不提及打包的概念,虽然多个文件的压缩肯定存在打包过程.打包和压 ...
- SpringMVC(1)
1.简要说明: Spring为展现层提供的基于MVC设计理念的优秀web框架,目前主流的框架 Spring3.0以后全面超越Struts2,成为最优秀的MVC框架 Spring MVC通过一套MVC注 ...
- bagging 和boosting的概念和区别
1.先弄清楚模型融合中的投票的概念 分为软投票和硬投票,硬投票就是几个模型预测的哪一类最多,最终模型就预测那一类,在投票相同的情况下,投票结果会按照分类器的排序选择排在第一个的分类器结果.但硬投票有个 ...
- C#string byte[] base64位互相转换
byte表示字节,byte[]则表示存放一系列字节的数组 1个字符=2个字节(byte) 1个字节=8个比特(bit) 网速上所说的1M其实是指1兆的小b,1M= 1024b/8 = 128kb 下面 ...
- HDU 1250 Hat's Fibonacci(大数相加)
传送门:http://acm.hdu.edu.cn/showproblem.php?pid=1250 Hat's Fibonacci Time Limit: 2000/1000 MS (Java/Ot ...
- 利用python 传输文件
最近在学python3 发现了一个很有用的功能,该功能可以将安装python 的机器作为一台http 服务器来分享本机的文件, 具体的使用记录如下 python3 的使用方法 直接在windows 的 ...