如何向其他方向调整textarea尺寸并按需显示指定文本？

一、核心问题分析 #

Chrome浏览器默认会让textarea拖拽选中文本时，预览内容与当前可视区域文本一致，即便已选中全部内容。你需要让textarea仅显示value 1;，同时隐藏左侧的Title 1:文本，还要处理右下角的尺寸调整按钮。

二、针对textarea的改造方案 #

1. 禁用尺寸调整+精准控制可视区域 #

通过CSS禁用textarea的尺寸调整功能，同时利用文本缩进和内边距把不需要的左侧文本移出可视范围，配合溢出隐藏实现需求：

textarea {
  width: 80px; /* 适配"value 1;"的显示宽度 */
  height: 18px;
  resize: none; /* 移除右下角尺寸调整按钮 */
  text-indent: -60px; /* 将"Title 1:"移出可视区域，数值根据实际文本宽度调整 */
  padding-left: 60px; /* 让目标文本从右侧位置显示 */
  overflow: hidden;
  border: 1px solid #ccc;
}

<textarea>Title 1: value 1; Title 2: value 2;</textarea>

document.querySelector('textarea').select();

这种方式下，textarea视觉上仅显示value 1;，但文本内容完整保留，拖拽选中全部文本时，预览会显示完整内容。

2. 用可编辑div替代textarea #

如果textarea的默认拖拽行为无法满足需求，可以使用contenteditable属性的div模拟textarea功能，拖拽选中全部文本时预览会显示完整内容：

.editable-div {
  width: 80px;
  height: 18px;
  border: 1px solid #ccc;
  overflow: hidden;
  padding: 2px;
  white-space: nowrap;
}

<div class="editable-div" contenteditable="true">Title 1: value 1; Title 2: value 2;</div>

const div = document.querySelector('.editable-div');
const range = document.createRange();
range.selectNodeContents(div);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

该方案可实现类似textarea的编辑功能，同时规避textarea的拖拽预览限制，还能通过CSS精准控制可视区域。

三、注意事项 #

• textarea的text-indent和padding-left数值需要根据实际字体、字号调整，确保Title 1:完全隐藏且value 1;完整显示。
• 使用contenteditable元素时，需额外处理回车行为、表单提交内容获取等细节，可通过JavaScript监听事件实现。

内容的提问来源于stack exchange，提问作者John Simon