原生js实现自适应宽度和高度输入框 |
您所在的位置：网站首页 › 输入框高度自适应什么意思 › 原生js实现自适应宽度和高度输入框 |
原生js实现自适应宽度和高度输入框
|
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、思路二、封装代码三、使用demo四、实现效果补充 前言利用js封装一个输入框组件，其宽度和高度跟随输入文字内容自适应。最大宽度不超过父元素宽度，能自动换行或按enter键换行。 一、思路可以直接使用input或textarea来实现，但是需要动态设置最大和最小宽度。这里使用div结合contenteditable属性来模拟input输入框，效果很好。 二、封装代码文件名：my-input.js /** * @description div模拟实现宽高自调整input输入框 * @condition 需要一个父元素，class为auto-input，宽度大于120px，可自定义placeholder. * @author bird * @time 2022/07/08 */ window.onload = function () { // 创建div元素 let inputDiv = document.createElement('div') // 添加class let divClass = document.createAttribute("class"); divClass.value = "my-input"; inputDiv.setAttributeNode(divClass); // 添加可编辑属性 let divEditable = document.createAttribute("contenteditable"); divEditable.value = true; inputDiv.setAttributeNode(divEditable); // 获取父元素 let fatherEle = document.getElementsByClassName("auto-input")[0]; if (fatherEle) { // 从父元素获取placeholder属性并添加到输入框 let divPlaceholder = document.createAttribute("placeholder"); divPlaceholder.value = fatherEle.getAttribute("placeholder"); inputDiv.setAttributeNode(divPlaceholder); // 设置父元素为flex,使输入框宽度能自适应 fatherEle.style.display = 'flex'; // 将输入框添加到父元素 fatherEle.appendChild(inputDiv) } // 创建style元素 let style = document.createElement('style'); style.innerHTML = ` .my-input { min-width: 100px; width: auto; padding: 0 10px; font-size: 13px; line-height: 20px; text-align: left; outline:none; border: solid 1px blue; } .my-input:empty::before { content: attr(placeholder); color: #999; } .my-input:focus::before { content: none; } `; document.getElementsByTagName('head').item(0).appendChild(style); } 三、使用demo 输入框demo 四、实现效果输入文字之前，有最小宽度 为了实现自适应宽度，本来想直接使用fit-content属性，但发现兼容性还差一点，于是想通过另外方案替代。方案一：父元素采用flex布局，自定义输入框元素设置width为auto；方案二：自定义输入框设置max-width为父元素clientWidth,display属性为inline-block;当前采用的是方案一。 |
输入文字后，自动换行 
按enter键直接换行 
【本文地址】