精华内容
下载资源
问答
  • 和支付宝支付页面差不多。移动端模拟数字键盘,保留两位小数,div模拟光标,div模拟input
  • 一个div输入框,它模拟input输入框,并且也模拟input输入框的placeholder属性,但是现在这个placeholder属性值并不是唯一确定不变的。这个div输入框其实是一个类似微信朋友圈的回复输入框一样,当输入为空的时候,要...

    今天有做到这么一个需求,
    一个div输入框,它模拟input输入框,并且也模拟input输入框的placeholder属性,但是现在这个placeholder属性值并不是唯一确定不变的。这个div输入框其实是一个类似微信朋友圈的回复输入框一样,当输入为空的时候,要显示给用户 @了谁,所以这个placeholder的内容是会变化的。

    在网上查了几种方式,使用js操作代价太大,行内css又不支持伪类,下面我提供一种自认为最好的解决方式:
    利用H5的data-属性:
    react中

    render() {
    	return (
    		<div class="input" data-text={variable}></div>
    	)
    }
    

    css:(采用sass语法)

    .input{
    	&:empty:before{
    		content:attr(data-text);
    		color:#ddd;
    	}
    }
    

    所以,这里content的内容,会随着dom节点的data-text属性的变化而变化,而data-text属性可以等于一个变量~
    效果如下:
    在这里插入图片描述


    在这里插入图片描述

    展开全文
  • div模拟input/textarea实现输入文字图片 1.css .div-edit { font-size: 15px; width: 100%; height: 40px; line-height: 20px; padding: 10px 15px; border: 1px solid #9f9f9f; border-radius: 8px; ...

    div模拟input/textarea实现输入文字图片

    1.css

    .div-edit {
    	font-size: 15px;
    	width: 100%;
    	height: 40px;
    	line-height: 20px;
    	padding: 10px 15px;
    	border: 1px solid #9f9f9f;
    	border-radius: 8px;
    	margin: 0;
    	display: flex;
    	flex-wrap: wrap;
    	box-sizing: border-box;
    	outline: 0;
    	-webkit-appearance: none;
    	overflow: auto;
    }
    
    .div-edit img {
    	height: 24px;
    	width: auto;
    }
    
    /* 清除左右滚动条 */
    .div-edit::-webkit-scrollbar {
    	display: none;
    }
    
    .div-edit:empty:before {
    	content: attr(placeholder);
    	color: #999;
    }
    
    .div-edit:focus:before {
    	content: none;
    }
    

    2.html

    <div id="saytext" class="div-edit" contenteditable="plaintext-only" placeholder="请输入信息..."></div>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568102205696&di=9cb52f7f2c062423319fdb31cc669b86&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201602%2F27%2F20160227213604_BVZYf.jpeg" height="80" onclick="changeSaytext(this)" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568102357940&di=aaef4c5eee235a59341d29d94581ae4b&imgtype=0&src=http%3A%2F%2Fimage.retui8.com%2F%3Furl%3Dhttp%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_jpg%2FvwWXNGTJrV2wEtK2Z4iaEzgJP95RdTy73iazdqWib8sDWSlWlhWY7nGuuFeYwXfVQtq23DtkLJUYEDxs9YNy2icQoA%2F640%3F.jpg" height="80" onclick="changeSaytext(this)" />
    		

    3.js

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
    	var range;
    	var editor = document.querySelector('#saytext');
    	var selection = window.getSelection();
    
    	function initSaytext() {
    		editor.onclick = function() {
    			if (selection.rangeCount && selection.getRangeAt) {
    				range = selection.getRangeAt(0);
    				range.deleteContents()
    			}
    		}
    		editor.onkeyup = function() {
    			if (selection.rangeCount && selection.getRangeAt) {
    				// 设置最后光标对象
    				range = selection.getRangeAt(0);
    				range.deleteContents()
    			}
    		}
    	}
    	initSaytext();
    	//div中插入img
    	function changeSaytext(e) {
    		//内容
    		var emojiText = e.cloneNode(true);
    		$(emojiText).attr("onclick", ""); //清除点击事件
    		editor.focus();
    		range = selection.getRangeAt(0);
    		range.insertNode(emojiText);
    		range = range.cloneRange();
    		range.setStartAfter(emojiText);
    		// 使光标开始和光标结束重叠
    		range.collapse(true);
    		// 清除选定对象的所有光标对象
    		selection.removeAllRanges();
    		// 插入新的光标对象
    		selection.addRange(range);
    	}
    </script>
    

    效果:

    展开全文
  • div模拟input实现输入框

    万次阅读 2017-03-30 10:09:04
    因为一些原因,无意中看到了H5的全局属性contenteditable,原本不知道这个属性该用在哪里,后来发现可以用带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调整高度哦)。...

    因为一些原因,无意中看到了H5的全局属性contenteditable,原本不知道这个属性该用在哪里,后来发现可以用带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调整高度哦)。但是div它是不支持placeholder属性的。那怎么在div内容为空的时候显示一个默认文字呢?

     

    先看下效果:

    看下代码(code)呗:

    <div class='input' contenteditable placeholder='请输入文字'></div>
    
    /**css样式*/
            .input{
                width:200px;
                height:24px;
                line-height:24px;
                font-size:14px;
                padding:5px 8px;
                border:1px solid #ddd;
            }
            .input:empty::before {
                content: attr(placeholder);
            }
    
    /**css样式*/
            .input{
                width:200px;
                height:24px;
                line-height:24px;
                font-size:14px;
                padding:5px 8px;
                border:1px solid #ddd;
            }
            .input:empty::before {
                content: attr(placeholder);
            }

    contenteditable属性是干嘛的呢?

    contenteditable属性定义了是否可编辑元素的内容;很官方的解释,有木有.....

    contenteditable='true'表示该元素内容可编辑;'false'表示该元素内容不可编辑;

    展开全文
  • div模拟input实现输入框 实现方案 H5的全局属性contenteditable属性 : 带有contenteditable属性的div作为输入框(div可以根据内容自动调整高度) H5代码块 <div class="search"> <div contenteditable ...

    目的

    div模拟input实现输入框在这里插入图片描述

    实现方案

    1. H5的全局属性contenteditable属性 : 带有contenteditable属性的div作为输入框(div可以根据内容自动调整高度)

    H5代码块

    <div class="search">
      <div contenteditable class="inputType" placeholder='请输入文字'></div>
      <div class="button">版权检索</div>
    </div>
    

    CSS代码块

    双float + calc()计算属性[右边button固定 左边自适应]

    /* 检索框 */
    .search{
      position: absolute;
      z-index: 3;
      left: 25%;
      top: 220px;
      width: 50%;
      height: 40px;
      margin: 0 auto;
      border:1px solid rgba(0, 0, 0, 0.45);
      background: #fff;
      border-radius: 4px;
    }
    .inputType{
      width:calc(100% - 90px);
      float: left;
      line-height: 38px;
      height: 38px;
      text-indent: 1em;
    }
    .inputType:empty::before {/* 显示提示词 */
        content: attr(placeholder);
    }
    .button{
      color: #fff;
      line-height: 38px;
      text-align: center;
      background: rgba(204, 51, 0, 1);
      border-left:1px solid rgba(0, 0, 0, 0.45);
      width: 90px;
      height: 38px;
      float: right;
    }
    

    效果展示

    窗口缩小后效果
    在这里插入图片描述

    展开全文
  • 1、input 改变光标颜色 input { outline: none; background: none; border: none; text-shadow: 0px 0px 0px #363C54; color: #00bcbc; -webkit-text-fill-color: transparent; } placeholder...
  • <!DOCTYPE html> <html> <head> <title>css3 语法实现div模拟Input</title> <style type="text/css"> /* div模拟输入框*/ .imitate-input{ ...
  • &lt;div contenteditable="true" &lt;/div&gt;  
  • input+div模拟select效果

    千次阅读 2015-10-22 22:31:20
    input+div模拟select效果   js /* onLoad Event*/ function autoOnLoad(){ createNationList(14,4); } /*div display*/ function Display(divDisplay) { var Display=doc
  • 直接固定input框在页面底部,ios可能会出现位置错乱,而且在输入框失去焦点后页面无法回弹 完整代码如下: &lt;style&gt; body { font-size: .26rem; -webkit-user-select:none; } .input { width: ...
  • 1.div 模拟 textarea 标签的 placeholder 属性" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-...
  • div实现input

    千次阅读 2018-11-19 02:48:49
    一、input和textarea的区别 1.input标签用于为基于Web表单创建交互式控件,以便接收来自用户的数据 2.textarea标签代表一个多行的纯文本编辑控件 区别: 1.&lt;textarea&gt;标签是成对的,有结束标签进行...
  • 一、input和textarea的区别 input HTML 元素用于为基于Web的表单创建交互式控件,以便接受来自用户的数据。 textarea HTML 元素代表一个多行的纯文本编辑控件. 区别: <textarea>标签是成对的,有结束...
  • 1.input与textarea的区别 &lt;input&gt;是单行文本框,不会换行。通过size属性指定显示字符的长度,注意:当使用css限定了宽高,那么size属性就不再起作用。  value属性指定初始值,Maxlength属性指定...
  • 使用div模拟输入框

    2019-07-18 16:18:21
    div class="divInput" contenteditable="true" @input='contentChange'></div> 2. contentChange(event){ this.inputContent = event.target.innerText }, 注意: 使用 contentedit...
  • div class="box_border"> <div contenteditable="true" class="aaaa" placeholder="电话"></div> <div contenteditable="true" class="aaaa" placeholder="验证码"></...
  • DIV模拟文本编辑器【模拟QQ空间说说文本框】
  • div模拟输入框

    千次阅读 2017-12-07 10:56:58
    by zhangxinxu from ... ... 一、温故而知新 ...很多年以前,稍等,让我搜一下contenteditable(右上角),哈,是2010年的时候,写了篇文章“div模拟textarea文本域轻松实现高度自适应”,就是说的conte
  • div模拟模态对话框

    千次阅读 2017-04-28 11:15:28
    本文使用div的形式来模拟模态对话框。
  • div模拟下拉框

    千次阅读 2018-03-13 16:59:38
    &lt;!doctype html&gt; &lt;html&gt; &lt;...div模拟下拉框&lt;/title&gt; &lt;script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"&g
  • div模拟textarea实现自动换行

    千次阅读 2019-05-05 19:50:50
    1、实现有提示语,输入后提示语消失效果(input的placeholder效果) div上加上placeholder="提示语",此时暂无效果 css文件中配置: #div:empty::before { content: attr(placeholder); ...
  • 使用div+css模拟select功能与效果

    千次阅读 2011-11-22 19:53:17
    colee做的模拟select效果 * {  margin: 0px;  padding:0; } input,img {vertical-align:middle;} .Option .on { background:#2F67D0; color:#fff;} --> function CoLeeSelect(thisObj){  var ...
  • 然后在很多浏览器上面都不兼容,至少万能的谷歌是不行的,因此想到可以用div模拟input功能:1、模拟input打字。使用 contenteditable=true这个属性即可2、模拟input的placeholder div:empty:before{ content: ...
  • div class="input" @click="openValue"> <input v-model="value" type="text" placeholder="筛选实验类型"> <img src="../assets/arrow.png" alt=""> </div> <div class="list" v-show=...
  • div模拟的下拉框

    千次阅读 2016-11-10 21:40:01
    模拟的下拉框
  • DIV模拟select

    千次阅读 2007-01-25 15:31:00
    select.htmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">DIV模拟selectli{list-style-type:none;} var sltCName = new selectWhb("sltCName");sltCName.a
  • 模拟input type=file 表单中的input type=”file”在前端开发中经常会用到,但是很悲剧的是input type=”file”在各个浏览器下表现不统一,样式很难起作用; 通常我的设计师是非常爱美的,如果真的要...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,570
精华内容 15,428
关键字:

div模拟input功能