原生js实现自适应宽度和高度输入框

qq_41088715

已于 2022-07-16 14:09:23 修改

阅读量2.8k

点赞数

文章标签：前端 javascript css

于 2022-07-08 21:49:56 首次发布

本文链接：https://blog.csdn.net/qq_41088715/article/details/125686083

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、思路
二、封装代码
三、使用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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>输入框demo</title>
</head>
<script type="text/javascript" src="my-input.js">

</script>
<body>
    <div class="auto-input" placeholder="请输入..." style="width:500px;border:solid 1px red;">
    </div>
</body>
</html>

四、实现效果

输入文字之前，有最小宽度
输入前
输入文字后，自动换行
输入文字自动换行
按enter键直接换行
按enter换行

补充

为了实现自适应宽度，本来想直接使用fit-content属性，但发现兼容性还差一点，于是想通过另外方案替代。方案一：父元素采用flex布局，自定义输入框元素设置width为auto；方案二：自定义输入框设置max-width为父元素clientWidth,display属性为inline-block;当前采用的是方案一。