使用文本动态扩展 <input> 元素

Question

我觉得这应该很容易。我已经搜索/尝试了至少一个星期，但仍然无济于事。

我想要一个带有占位符文本的 <input> 元素。我希望元素仅与占位符文本一样宽。当您单击<input> 时，我希望宽度保持不变。在您键入时，如果您的输入文本超出了原始占位符文本的宽度（因此也超出了 <input> 元素本身），我希望 <input> 扩展以容纳文本。

有什么想法吗？

Answer 1

这是一个考虑不同字体大小、不同字符宽度等的工作解决方案的尝试（在原版javascript）：

function reviewWidth(startWidth) {

/* Grab various elements */
var hiddenSpan = document.getElementsByClassName('hidden')[0];
var inputValue = document.getElementsByTagName('input')[0].value;

/* Update text content of hiddenSpan */
hiddenSpan.innerHTML = inputValue;

/* Update <input> width */
var hiddenSpanStyles = getComputedStyle(hiddenSpan);
var newWidth = parseInt(hiddenSpanStyles.getPropertyValue('width'));

if (newWidth > startWidth) {
    input.style.width = newWidth + 'px';
}

else {
    input.style.width = startWidth + 'px';	
}

}

/* Grab various elements */
var body = document.getElementsByTagName('body')[0];
var input = document.getElementsByTagName('input')[0];
var placeholder = input.getAttribute('placeholder');

/* Create hiddenSpan */
var hiddenSpan = document.createElement('span');
var placeholderText = document.createTextNode(placeholder);
hiddenSpan.appendChild(placeholderText);

/* Style hiddenSpan */
var inputStyles = getComputedStyle(input);
hiddenSpan.style.fontFamily = inputStyles.getPropertyValue('font-family');
hiddenSpan.style.fontSize = inputStyles.getPropertyValue('font-size');
hiddenSpan.style.borderLeftWidth = inputStyles.getPropertyValue('border-left-width');
hiddenSpan.style.paddingLeft = inputStyles.getPropertyValue('padding-left');
hiddenSpan.style.paddingRight = inputStyles.getPropertyValue('padding-right');
hiddenSpan.style.borderRightWidth = inputStyles.getPropertyValue('border-right-width');
hiddenSpan.style.display = 'inline-block';
hiddenSpan.style.opacity = '0';
hiddenSpan.classList.add('hidden');

/* Add hiddenSpan to document body */
body.appendChild(hiddenSpan);

/* Initialise <input> width */
var hiddenSpanStyles = getComputedStyle(hiddenSpan);
var startWidth = parseInt(hiddenSpanStyles.getPropertyValue('width'));
input.style.width = startWidth + 'px';

/* Run reviewWidth() function once */
if (input.value != '') {
    reviewWidth(startWidth);
}


/* Add Event Listener to <input> to trigger reviewWidth() function */
input.addEventListener('input',function(){reviewWidth(startWidth);},false);

input {
font-family: arial, sans-serif;
font-size: 0.8em;
padding: 2px;
}

<input type="text" placeholder="Example Placeholder" />

Answer 2

我对@Rounin 的回答添加了一些小的改进，以进行我自己的尝试：

• 解析 HTML 中的连续空格会压缩为一个空格，除非它们是不间断的，因此我将 映射到 &nbsp。此外，我将< 映射到< 以转义HTML。我没有使用textContent 而不是innerHTML 的原因是因为无法将不间断空格注入textContent。
• 隐藏的 span 在不需要时不再是 DOM 的一部分，因此当它太宽时不会触发父元素滚动。
• width 的像素值实际上是浮点数，而不是整数，因此使用 parseFloat 代替 parseInt 会使 <input/> 的宽度更精确。
• 我精简了一些代码以减少冗长，同时努力保持可读性。

/* Set up */
var regExp = /[ <]/g;

function replacer(c) {
  return {
    ' ': '&nbsp;',
    '<': '&lt;'
  }[c];
}

/* Grab various elements */
var body = document.querySelector('body');
var input = document.querySelector('input');
var placeholder = input.getAttribute('placeholder');

/* Create hiddenSpan */
var hiddenSpan = document.createElement('span');
hiddenSpan.innerHTML = placeholder.replace(regExp, replacer);

/* Style hiddenSpan */
var inputStyles = getComputedStyle(input);

['font', 'padding', 'border', 'display'].forEach(function(prop) {
  hiddenSpan.style[prop] = inputStyles.getPropertyValue(prop);
});

hiddenSpan.style.visibility = 'hidden';
hiddenSpan.style.pointerEvents = 'none';

var hiddenSpanStyles = getComputedStyle(hiddenSpan);

/* Initialise <input> width */
body.appendChild(hiddenSpan);

var startWidth = parseFloat(hiddenSpanStyles.getPropertyValue('width'));

body.removeChild(hiddenSpan);

function reviewWidth() {
  var inputValue = input.value;

  /* Update text content of hiddenSpan */
  hiddenSpan.innerHTML = inputValue.replace(regExp, replacer);

  body.appendChild(hiddenSpan);

  /* Update <input> width */
  var newWidth = parseFloat(hiddenSpanStyles.getPropertyValue('width'));

  body.removeChild(hiddenSpan);

  if (newWidth > startWidth) {
    input.style.width = newWidth + 'px';
  } else {
    input.style.width = startWidth + 'px';
  }
}

reviewWidth();

/* Add Event Listener to <input> to trigger reviewWidth() function */
input.addEventListener('input', reviewWidth, false);

input {
  font-family: arial, sans-serif;
  font-size: 0.8em;
  padding: 2px;
}

<input type="text" placeholder="Example Placeholder" />

如果您对改进此答案有任何问题或建议，请随时离开 cmets。