用一个div模拟textarea的实现

  <textarea> 标签定义一个多行的文本输入控件。但是它不能像div一样随着内容增加而自动增加,一言不合就出现滚动条,有是有为了更好的交互,可能需要使用div来模拟textarea的实现,直奔主题吧。

1、内容可编辑 contenteditable

对就是contenteditable,给div添加contenteditable=true即可;

2、demo

//css
div{
	width: 400px;
	min-height: 100px;
        max-height: 300px;
	 _height: 100px; //IE6
	margin-left: auto;
	margin-right: auto;
	padding: 3px;
	outline: 0;
	border: 1px solid #a0b3d6;
	font-size: 12px;
	word-wrap: break-word;
	overflow-x: hidden;
	overflow-y: auto; //超过最大高度就出现滚动条
	_overflow-y: visible;
}

//html
<div contenteditable="true">
    .....此处省略.....
</div>

  

时间: 2024-10-07 11:44:35

用一个div模拟textarea的实现的相关文章

div模拟textarea以实现高度自适应实例页面

作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执地岿然不动.所以,有时候,为了增加交互体验想让文本域高度自适应的时候,就会遇到麻烦. <!DOCTYPE <!DOCTYPE html> <html> <head> <title>div模拟textarea以实现高度自适应实例页面</title>

div模拟textarea自适应高度

之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着输入行数的增多而增大,于是我上网寻求了下帮助,发现大神张鑫旭的这篇文章<div模拟textarea文本域轻松实现高度自适应>,成功解决我的问题 代码如下: 1 1 <!DOCTYPE html> 2 2 <html lang="en"> 3 3 <

div模拟textarea文本域轻松实现高度自适应

<style> .textarea{ width:400px; min-height:20px; max-height:300px; _height:120px; margin: 0 auto; padding:3px; outline:0; border:1px solid #a0b3d6; font-size:12px; line-height:24px; word-wrap:break-word; overflow-x:hidden; overflow-y:auto; } </st

div模拟textarea

今天本来呢是要搜js中的createTextRange,结果我输入createTextRange,按下回车,百度第二条就是张鑫旭前辈的博文,意外的惊喜从我点击进去的那一刻就发生了, 惊喜在这里:HMTL的块标签可以让其像textarea一样支持blur,focus事件: 怎么做到的呢?就我目前一个小菜鸟的水平,这三个简单方法就可以了: 第一个方法:contenteditable="true" <p contenteditable="true" style=&q

将div变成可编辑的状态,你造么?QQ空间中的发表说说的文本框其实就是一个DIV,而非textarea文本框

<div contenteditable="true">可以编辑里面的内容</div> 如果你在BODY里面加上contenteditable="true",可以发现该属性是多么的神奇.因此我们可以给HTML标签设置contenteditable="true"属性则可以对该标签进行编辑. contenteditable属性兼容所有浏览器(IE6之前的版本是否兼容未测试) 在有些时候我们完全可以用DIV去替代input或者t

vue中div模拟文本编辑器并且实现v-model功能

说明一下实现div模拟文本编辑器实现v-model数据的双向绑定而不用input的原因 因为div使用v-html绑定的数据中是可以嵌套标签的列入使用v-html进行数据的绑定自定义的标签并不会被过滤掉. v-model 是 Vue 框架提供的众多指令中的一个,其主要作用是可以实现在表单 <input>.<textarea> 及 <select> 标签元素上创建双向数据绑定.但是当我们但是当我们使用div添加contenteditable="true"

一个,关于textarea的小问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> *{margin:0; padding:

如何点击隐藏和显示一个div

如何点击隐藏和显示一个div: 在很多时候有这样的需求,那就是点击显示一个div,再点击就会隐藏显示的div.例如在网站后台添加文章的时候,有时候会根据用户的需要选择是否添加额外的信息.下面就简单介绍一下如何实现此种效果. 实现点击隐藏和显示div的方法有多种,下面就介绍一下比较常用的一种: 使用toggle()方法实现div的隐藏隐藏和显示,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" ut

可输入div(模拟input输入)

<div contenteditable="true"></div> div输入框有一个好处是div高度随输入内容自动伸缩,可以看见所有输入内容,而textarea和input只显示内容的一部分,输入前截图: 输入后截图: 下面是一个div编辑实例: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="