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 ...
随机推荐
- 修改WSAD的默认工作区(转)
如果要一直用某个目录作为工作区,可以在启动WSAD的时候将该目录设为默认工作区,这样启动时直接启动,方便.快捷.但是如果设置后在想换工作区就比较麻烦了,因为没有可供选择的界面了,跟网上搜了一下总结共有 ...
- Axure RP 8 学习记录
一.Axure RP 简介 Axure是一个专业的快速原型设计工具.能够快速创建应用软件或Web网站的线框图.流程图.原型和规格说明文档. 二.Axure RP下载 1.下载安装包 https://w ...
- Java之生成Pdf并对Pdf内容操作
虽说网上有很多可以在线导出Pdf或者word或者转成png等格式的工具,但是我觉得还是得了解知道是怎么实现的.一来,在线免费转换工具,是有容量限制的,达到一定的容量时,是不能成功导出的;二来,业务需求 ...
- 简单使用idea Spring Boot搭建项目
第一步:使用Spring Initializr创建 第二步:项目配置 第三步:选择项目需要的依赖 第五步: ok 创建完成,修改仓库 maven{ url 'http://maven.aliyun.c ...
- 关于readonly的一些说明
readonly在代码中只能在字段初始化器和构造函数中赋值,并不是说readonly只能赋值一次,超出这个范围以后readonly就不能通过代码修改了,但是还是可以用反射来修改,readonly仅仅是 ...
- 手工检测SQL注入(安全性测试)
手动你的ASP站可否注入: http://127.0.0.1/xx?id=11 and 1=1 (正常页面) http://127.0.0.1/xx?id=11 and 1=2 (出错页面) 检测表段 ...
- 微信小程序跳H5页面
主页面:index.wxml 主页面:index.js ↑跳转到另一个wxml页面→recharge.wxml recharge.wxml web-view中设置跳转h5的链接,可以加上需要的参数: ...
- maven中的坐标和仓库
1.坐标 pom.xml中的groupId.artifactId和version都可以构成项目的坐标. <dependency> <groupId></groupI ...
- Matlab 编程入门(一):编程基础
上学期学了一些matlab的知识,这学期再用时竟然发现已经忘得差不多了(┬_┬) 于是决定重新开始并将它们记录下来,也方便自己以后查漏补缺! M文件编程 脚本文件 matlab有自己的命令行窗口,对于 ...
- cop2000实现补码两位乘
程序地址 机器码 反汇编语言 指令说明 ;IN 可以使用此指令在cop2000上输入数据 00 7C4B MOV A,#4BH 模拟输入X补 02 80 MOV R0,A 放入R0 03 88F9 M ...