html div 模拟input

2024-11-02

div模拟输入框input/textarea

//html <div class="info-wrap"> <form class="formToCheck" id="formToCheck" method="get" action="#"> <div class="info-box"> <div contenteditable="true&quo

VUE DIV模拟input框的基本处理

关键代码 <div class="dialog-main" :contenteditable= "editable" v-text="noticeContent" v-if="noDate" innerHTML.length = "20" ref="Maincontent" @input="handleInput" @compositionstart="

前段时间项目需要用到双向列表选择,想直接用select,结果发现某些样式不支持,只好用div模拟了以下,功能基本实现能用了,需要其他功能自己加上,譬如列表里展示多列数据等. select版链接:http://www.cnblogs.com/tie123abc/p/6018912.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>双向列表选择器DIV

div模拟textarea在ios下不兼容的问题解决

今天发现一个好东西,赶紧记下来,我在用textarea的时候,想要自适应高度,这样就不会出现滚动条.网上找了很多,都是用div模拟的,但是好扯淡,div模拟的在ios下不能聚焦并且不能输入.真坑.... 然后找了很久,发现了下面这个好东西,嘿嘿嘿,我给你看个宝贝. 这个就不需要去模拟啦,可以直接使用textarea. (function (root, factory) { 'use strict'; if (typeof define === 'function' && define.am

使用contenteditable+div模拟textarea文本域实现高度自适应

使用contenteditable+div模拟textarea文本域实现高度自适应开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-size插件来做到textarea的高度自适应,后来因为遇到一些问题,而且也多加了依赖缺乏可定制,所以决定使用contenteditable来实现. contenteditable介绍 contenteditable属性规定元素内容是否可编辑,是H5新增的属性,支持情况相当好,基本上所有的浏览器都兼容.

div 模拟<select>事件

IE7 下,不能够自定义<select>/<option>的样式,所以为了方便起见,用div可以进行模拟 <!doctype html> <html> <meta charset="utf-8"> <title>div模拟select</title> <script type="text/javascript" src="js/jquery-1.8.3.min.js&

div模拟table，可实现左右高度同增长（html布局）

<!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><meta http-equiv="Content-Ty

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

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

jquery用div模拟一个下拉列表框

原文 jquery用div模拟一个下拉列表框今天分享一个用我自己用jquery写的,用div模拟下拉列表select,这个效果网上有很多,但是写一个有自己思路的代码效果,更有成就感,先看截图: 自我感觉还有焦点获取效果没模拟出来,现在实在没想到好的办法,如果您有好的方法和思路,欢迎并谢谢你能告诉我. 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <ti

div模拟table

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>div模拟table</title><style> *{ padding:0; margin:0; } .div_table{ display:table; border-collapse:collapse; } .div_table .thead,.div_table .tbody{ dis

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

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div模拟textarea文本域轻松实现高度自适应</title> <style> h2 { text-align: center; margin: 50px auto; } .test_box { width: 400px; min-heigh

div模拟文本框textarea

需求:利用highlight.js对文本框中的内容进行高亮显示 1.highlight.js使用 js中:<script src="js/highlight/highlight.pack.js"></script> <script type="text/javascript"> hljs.initHighlightingOnLoad();//SQL高亮显示 $(document).ready(function() { $(&quo

H5新增属性contenteditable（不用JS，实现div模拟textarea高度自增长）

无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea(文本域),让textrarea的高度随内容的增加而自动增加.当时就惊呆了,居然还有这种操作!!! <div id="textarea" contenteditable="true"></div> 原文博客 contenteditable属性介绍:

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

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于textarea文本域以及高度自适应 textarea标签为表单元素,一般用在多行文字的输入.在web应用上常见的是评论输入框,微博信息输入框等.例如企鹅微博的输入框: 作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随

div模拟键盘输入

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="app

div模拟textarea自适应高度

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

ie下div模拟的表格，表头表体无法对齐

现象:ie下,如果某个区域滚动显示表格内容(div模拟的table),表体出现滚动条的时候,会跟表头无法对齐. 解决方法:1.首先需要知道两个高度:表体最大高度height1.目前表体要显示的内容高度height2. 2.在css文件写一个样式:.ieScroll{padding-right:17px;} 3.比较两个高度,如果height1>=height2,此时不会出现滚动条,所以移除表头的class:ieScroll:否则表头增加class:ieScroll. 奇妙的17px~ 如果有更好

div模拟textarea

有些Weber可能没有用过contenteditable这个属性,如果想编辑一个DIV里面的内容,这个属性是一个非常不错的选择 <div contenteditable="true">可以编辑里面的内容</div> 如果你在BODY里面加上contenteditable="true",可以发现该属性是多么的神奇.因此我们可以给HTML标签设置contenteditable="true"属性则可以对该标签进行编辑. c

div模拟的下拉框特效

随笔- 4 文章- 0 评论- 0 ? <style type="text/css"> body, ul, li { margin: 0; padding: 0; font-size: 13px; } ul, li { list-style: none; } #divselect { width: 186px; margin: 80px auto; position: relative; z-index: 10000; } #divselect cite { width:

div模拟的下拉框特效jquery

从网上找来的,感觉不错就拿来分享下 <style type="text/css"> body, ul, li { margin: 0; padding: 0; font-size: 13px; } ul, li { list-style: none; } #divselect { width: 186px; margin: 80px auto; position: relative; z-index: 10000; } #divselect cite { width: 15