输入框（input）的宽度根据内容自适应

一、概述

这可以通过使用CSS的width属性和一些JavaScript来完成。

二、案例

1、基础案例

HTML部分：

<input type="text" id="autoWidthInput" oninput="adjustWidth(this)">
1

在这个示例中，我们创建了一个元素，并为它指定了一个id属性，以便稍后在JavaScript中引用它。我们还使用oninput属性来调用adjustWidth函数，该函数将在输入框的内容发生变化时被触发。

JavaScript部分：

function adjustWidth(inputElement) {
  // 获取输入框中的文本内容
  var inputText = inputElement.value;

  // 获取文本内容的宽度
  var textWidth = getTextWidth(inputText);

  // 设置输入框的宽度，加上一些额外的像素作为填充
  inputElement.style.width = textWidth + 10 + "px";
}

function getTextWidth(text) {
  // 创建一个隐藏的临时元素，用于计算文本宽度
  var tempElement = document.createElement("span");
  tempElement.style.visibility = "hidden";
  tempElement.style.whiteSpace = "pre"; // 保持空格和换行的格式
  tempElement.style.display = "inline-block";
  tempElement.textContent = text;

  // 将临时元素添加到文档中
  document.body.appendChild(tempElement);

  // 获取文本的宽度
  var width = tempElement.offsetWidth;

  // 从文档中移除临时元素
  document.body.removeChild(tempElement);

  return width;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在这段JavaScript代码中，adjustWidth函数被调用以根据输入框中的文本内容来调整输入框的宽度。它首先获取输入框的文本内容，然后使用getTextWidth函数来计算文本的宽度，并将宽度设置为输入框的width属性。getTextWidth函数创建一个临时的隐藏元素，用于计算文本的宽度，然后返回计算得到的宽度。

通过这种方式，输入框的宽度将根据输入的内容自动调整，以适应文本的宽度。你可以根据需要进一步自定义样式和调整函数中的像素值以满足你的要求。

2、进阶案例

基础案例需要给每个input元素绑定方法，这样方法就不能放入闭包中。

我们可以通过 .self-adaption-input 类来实现对 input 元素的方法绑定，并且可以支持还未创建的input。

$('body').on('input', '.self-adaption-input', function(event) {
    $(this).width(getTextWidth($(this).val())+10);
});
1
2
3