可输入div(模拟input输入)
Posted wj19940520
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了可输入div(模拟input输入)相关的知识，希望对你有一定的参考价值。
<div contenteditable="true"></div>
div输入框有一个好处是div高度随输入内容自动伸缩，可以看见所有输入内容，而textarea和input只显示内容的一部分，输入前截图：
输入后截图：
下面是一个div编辑实例：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <title>瑞途ERP R8</title> <script src="js/jquery-1.11.3.min.js"></script> <style> .editor{ display:inline-block; padding:5px; height:20px; font-size:14px; /*-webkit-user-modify:read-write;*/ } .placeholder:after{ content:‘请输入点什么吧~~‘; color:#999; } select{ border:none; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent; } .item{ /*width:100px;*/ background:#ebf9ff; cursor: pointer; font-size:14px; display:inline-block; margin:10px 5px; padding:5px; } .remove{ color:#bdf; display:inline-block; text-align: center; font-size:12px; margin-left:5px; } .tip-box{ margin:-50px 50px 50px 50px; width:400px; border-left:1px solid #ddd; border-right:1px solid #ddd; box-shadow: 0px 2px 5px rgba(0,0,0,.2); } .tip li{ padding:5px 10px; border-bottom:1px solid #ddd; } .selected{ background:#eee; } .container{ margin:50px; width:400px; border:1px solid green; } </style> </head> <body> <div id="container" class="container"> <div class="item" > <select name="" id=""> <option value="">3晚</option> <option value="">4天5晚</option> <option value="">1晚</option> </select> 北京<span class="remove">X</span> </div> <div class="item"> <select name="" id=""> <option value="">3晚</option> <option value="">4天5晚</option> <option value="">1晚</option> </select> 天津<span class="remove">X</span> </div> <div id="editor" class="editor" contenteditable></div> </div> <div class="tip-box"> <ul class="tip"> </ul> </div> <script> function content(ele){ var html=""; html+=‘<div class="item"><select name="" id=""><option value="">3晚</option><option value="">4天5晚</option>‘ +‘<option value="">1晚</option></select>‘+ele+‘<span class="remove">X</span></div>‘; return html; } var lastEditRange; $(‘#container‘).click(function(e){ $(‘#editor‘).trigger(‘focus‘); }) $(‘#editor‘).click(function(){ }) $(‘select‘).click(function(e){e.stopPropagation();}) $(‘#container‘).on(‘click‘,‘.item select‘,function(e){e.stopPropagation();}) var arr=["澳门","澳门2","澳门3","澳门4",‘奥克兰‘,‘澳洲‘,‘巴厘岛‘,‘巴黎1‘,‘巴黎2‘,‘巴黎3‘,‘巴黎4‘,‘巴塞罗那‘,‘巴西利亚‘]; $(‘.remove‘).on(‘click‘,function(){$(this).parent().remove();}) $(document).on(‘click‘,‘.item .remove‘,function(){$(this).parent().remove();}) var tipList=$(‘.tip‘); $(‘#editor‘).keyup(function(e){keyupFn(e);}) var currentSelection=-1; $(‘#editor‘).keydown(function(e){keydownFn(e);}) function keyupFn(e){ if(e.which!=8&&e.which!=13&&e.which!=27&& e.which != 38 && e.which != 40){ var valText=$.trim($(‘#editor‘).text()); if(valText==""){ return; }else{ tipList.empty(); for(var i=0;i<arr.length;i++){ if(arr[i].match(valText)){ var element=$(‘<li></li>‘).html(arr[i]) .click(function(){ $(‘#editor‘).before(content($(this).html())); $(‘#editor‘).empty(); tipList.empty(); }).mouseenter(function(){ $(this).addClass(‘selected‘); }).mouseleave(function(){ $(this).removeClass(‘selected‘); }) tipList.append(element); } } } } console.log(valText); } function keydownFn(e){ switch(e.which){ case 38://up arrow e.preventDefault(); $(‘ul.tip li‘).removeClass(‘selected‘); if((currentSelection - 1) >= 0){ currentSelection--; $( "ul.tip li:eq(" + currentSelection + ")" ) .addClass(‘selected‘); } else { currentSelection = -1; } break; case 40://down arrow e.preventDefault(); if((currentSelection+1)<$(‘ul.tip li‘).length){ $(‘ul.tip li‘).removeClass(‘selected‘); currentSelection++; console.log(currentSelection); $(‘ul.tip li‘).eq(currentSelection).addClass(‘selected‘); } break; case 13://enter e.preventDefault(); if(currentSelection>-1){ var text=$(‘ul.tip li‘).eq(currentSelection).html(); console.log(text); $(‘#editor‘).before(content(text)); $(‘#editor‘).empty(); } tipList.empty(); currentSelection=-1; break; case 27://esc currentSelection=-1; tipList.empty(); $(‘#editor‘).html(""); break; case 8://backspace if($(‘#editor‘).html()==""){ $(‘#container>.item:last‘).remove(); tipList.empty(); } tipList.empty(); break; } } </script> </body> </html>
效果截图：
以上是关于可输入div(模拟input输入)的主要内容，如果未能解决你的问题，请参考以下文章
可编辑div contenteditable="plaintext-only" 模拟输入框，在IE浏览器下，鼠标不显示光标，不能输入编辑
微信小程序开发中input框在模拟器上点击输入无效，无法输入文字
Vue高亮输入 (Vue Highlightable Input)使用，node-interval-tree区间树，可编辑div光标前移解决方案