HTML直接在DIV里输入文字的方法

在做aJax留言的时候，发现用textarea留言非常别扭，有右边的那个滑动动条的东东看着特别别扭，用CSS去掉后结果发现IE9以下的浏览器还不支持，所以就想，DIV里可不可以直接输入文字，下面放出DIV输入文字的代码

<div contenteditable="true" style="width:100px;height:50px;border:1px solid red;word-wrap:break-word;overflow:hidden;">
现在可以输入文字哦！
</div>

原文地址：https://www.cnblogs.com/educodes/p/11821783.html

时间： 2024-11-08 18:54:05

HTML直接在DIV里输入文字的方法的相关文章

让透明div里的文字不透明

<div class="box"> 这是一段不应该透明的文字 </div> .box{width: 300px;height: 25px;background: red;opacity: 0.5} 这样我的文字几乎看不清,这当然不是我想要的,随即去查询资料,找到了一个解决办法,使用css3的属性: .box{width: 300px;height: 25px;background: rgba(255,0,0,0.5);} 这种方式是利用css3的新属性,

鼠标移动div时禁止选中div中的文字的方法

这是通过CSS样式来实现的禁止用鼠标选择功能:unselectable为IE准备,onselectstart为Chrome.Safari准备,-moz-user-select是FF的 cssstyle: html,body{-moz-user-select: none; -khtml-user-select: none; user-select: none;} <div unselectable="on" onselectstart="return false;&quo

模拟可编辑div输入域同时输入文字表情

近期遇到了模拟可编辑div输入域同时输入文字表情的需求,本来还觉得很好做,但是在具体实施的过程中遇到了一点问题. 第一个比较简单的问题是表情和对应字符的映射关系,这部分比较好做,没有用富文本框也没有用编辑器,做了表情和相应字符的对应关系只有就可以实现这个需求. 第二个问题在解决过程中就比较棘手了,因为是自己模拟输入域,所以对于在文字中加入表情后光标的定位及后续的输入是有要求的,就是得符合正常的输入习惯.这个问题的核心就是对于node节点的操作和光标对象的熟悉程度及其内部属性和方法的使用.对于前端

实现图标Icon+文字在div里自动中心居中（水平垂直居中）

已知div行高设置text-align:center文字会自动居中. 通过:before来设置icon的地址和高宽. 需要设置图片默认的垂直居中条件,与文字一致,为text-bottom. 设置图片行级显示. <!Doctype html><html><head><style>body{margin:0;padding:0;}.con{position:absolute;width:500px;height:50px;border:1px red solid

文字或是子div在父div里垂直居中

只有一行文字的话,直接用line-hight可以解决. 有多行文字或是想要子div在父div里垂直居中: 首先要理解vertical-align: middle只在table属性中才会垂直居中,应用到display:inline-block元素的话就是和隔壁元素居中对齐. 方法一: 在div里增加一个隐藏子元素,高度为100%和父div一样,这样再设置vertical-align: middle的话子div就会和父div一样高的子元素垂直居中对齐. <style> .box{ float: l

“display:block-inline形式的Span或Div中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法

摘自:http://www.xuebuyuan.com/825857.html 最近在使用3个span(或div)制作带圆角边框的按钮时,按照常识,把span的display设置成inline-block,这样就可以设置span的width和height了,很爽的~ 可是当我在中间的span写上文字的时候,神奇的事情发生了: 是的,写上字的那个span掉下来了,掉落,排版错位,很恶心的东西!使用Chrome的开发者工具查看,css和盒模型没有半点问题,郁闷中-- 仔细观察发现,掉落的高度貌似跟文

dom 输入文字模拟滚动

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:30px; height:500px; background:#000; position:absolute; left:10px; top:10px; } #div2{ width:30px; height:30p

在窗体上创建自己的光标并输入文字

我们知道在文本框等可以接收输入的组件中,我们可以看到闪烁的光标,并可以输入文字,如果我们在,比如窗体上时,因为不支持输入,也无法显示闪烁的光标,那我们有办法做自己的输入吗?当然可以,下面我们演示在Form上来输入文字. 用到的API函数如下 GetTextMetrics:获取程序当前的字体信息,存放到TEXTMETRIC结构中 CreateCaret:为系统插入标记创建一个新的形状,并且将插入标记的属主关系指定给特定的窗口.插入标记的形状.可以是线.块或位图 ShowCaret:显示光标 Se

移动端开发注册、登陆input常用事件（input输入文字触发事件）

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>移动端开发注册.登陆input常用事件(input输入文字触发事件)</title> <meta name="keywords" content="