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 ...
随机推荐
- 使用Fragment实现Tab效果
在上一篇中,我们将了使用ViewPager实现Tab效果.如果没有阅读过,可以点击下面的地址: http://www.cnblogs.com/fuly550871915/p/4849893.html ...
- 类图(Rose) - Windows XP经典软件系列
版权声明:本文为xiaobin原创文章.未经博主同意不得转载. https://blog.csdn.net/xiaobin_HLJ80/article/details/24584625 ...
- VC++ MFC工程中中如何将一个工程的资源(如对话框)复制到另外一个工程
问题的提出:在工程1中用到的资源,在工程2中已有现成的.即工程1中要用到的对话框和工程2的完全相同,而工程2中对该对话框的布局已设计好.控件变量都绑定好了.但由于该对话框的控件特别多,如果在工程1中再 ...
- 关于iOS 3D touch 指纹验证的随笔
file:///Users/OWen/Desktop/3DTouch.png 随着iOS系统不断的更新迭代,苹果总会推出一些新的功能,今天就研究了一下iOS8之后推出的指纹验证的功能,然后写了一个小d ...
- 【题解】洛谷P1052 [NOIP2005TG] 过河(DP+离散化)
题目来源:洛谷P1052 思路 一开始觉得是贪心 但是仔细一想不对 是DP 再仔细一看数据不对 有点大 如果直接存下的话 显然会炸 那么就需要考虑离散化 因为一步最大跳10格 那么我们考虑从1到10都 ...
- ARM 汇编指令集 特点5:ARM 多级指令流水线
1.为增加处理器指令流 的速度,ARM使用多级流水线. 就是举个例子: mov r1,#0 ,这条指令 分几个人做,一个人从存储器取指令,解码指令中用到的寄存器,寄存器运算. 这样三步 :如果一个人做 ...
- JS异步编程 (2) - Promise、Generator、async/await
JS异步编程 (2) - Promise.Generator.async/await 上篇文章我们讲了下JS异步编程的相关知识,比如什么是异步,为什么要使用异步编程以及在浏览器中JS如何实现异步的.最 ...
- 分布式网上商城项目-solr搜索功能错误
1.RuntimeException错误 java.lang.RuntimeException: org.apache.ibatis.binding.BindingException: Invalid ...
- springboot(2.0以上) --数据源切换时报错
在进行数据源切换时spring.datasource.type类型根据源码所给的默认值修改后依然报错 先看源码:标色部分 , 就是springboot所给的数据源 , 正常来说只要在配置文件中修改 ...
- 集群、RAC和MAA
集群:是一种由两台或多台节点机构成的松散耦合的计算节点集合,这个集合在整个网络中表现为单一的系统,并通过单一接口进行使用和管理.给用户提供网络服务或应用程序的单一视图.大多数模式下,集群中所有计算机都 ...