如何判断HTML输入文本太长而无法完全显示？

Question

如何检测用户提供的文本是否长于 HTML

<input>

是否能够完整显示？

Answer 1

您可能正在寻找

maxlength

属性，可以这样设置：

<input type="text" maxlength="LENGTH HERE">

就您使用的最大长度而言，它取决于

input

元素的大小。我建议您猜测和检查，直到找到最适合您的用例的值。

Answer 2

哇，chatgpt 的回答确实有效。核心思想是比较

inputText.scrollWidth > inputText.clientWidth

.

完整答案如下

要检测 HTML 输入文本是否太长而无法在其容器中完全显示，您可以使用 JavaScript 将输入的宽度与容器的宽度进行比较。如果输入的宽度超过了容器的宽度，则意味着文本太长而无法完全可见，您可以采取适当的措施来处理这种情况。

以下是有关如何实现此目标的分步指南：

1. 创建 HTML 结构：

<div id="container">
  <input type="text" id="inputText" />
</div>

2. 使用 CSS 设置容器和输入字段的样式。将容器设置为固定宽度，您可以根据需要添加任何其他样式。

#container {
  width: 300px; /* Set the width of your container */
  border: 1px solid #ccc;
  padding: 10px;
}

#inputText {
  width: 100%;
  box-sizing: border-box;
}

3. 编写 JavaScript 来检测输入文本对于容器来说是否太长。您可以通过将输入元素的

   scrollWidth

   属性与其客户端宽度进行比较来完成此操作。

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const container = document.getElementById("container");
    const inputText = document.getElementById("inputText");

    function isInputTextTooLong() {
      return inputText.scrollWidth > inputText.clientWidth;
    }

    function handleInputTextOverflow() {
      if (isInputTextTooLong()) {
        console.log("Input text is too long to show entirely.");
        // You can handle the overflow situation here (e.g., show a tooltip, truncate the text, etc.).
      } else {
        console.log("Input text fits entirely within the container.");
      }
    }

    handleInputTextOverflow();

    // Optional: You can also check for changes dynamically (e.g., user input).
    inputText.addEventListener("input", handleInputTextOverflow);
  });
</script>

此代码在页面加载时检查输入文本是否太长，并侦听输入事件以处理动态更改（例如用户输入）。

通过比较

scrollWidth

和

clientWidth

，您可以确定文本是否溢出其容器，并可以根据您的要求采取适当的操作。例如，您可能希望显示包含全文的工具提示或使用省略号 (...) 截断文本以使其适合容器。

Answer 3

首先通过

input

 取回您的 

querySelector

const sample=document.querySelector("specificInput")

然后通过

value

属性访问其中的文本

const text=sample.value;

如果您想检查每个单词的宽度，请使用

split()

方法将单词彼此分开并将其存储在数组中。

const wordArray=text.split(" ");

（在 split() 中你应该使用空格，因为在这种情况下只检索单词）

但如果您想要全文，您可以跳过

split()

部分。

然后使用

measureText().width

检查文本或单词的宽度（如果你想检查单词的宽度，因为它们存储在数组中，你应该迭代数组来检查它们的宽度）

最后，使用

if

条件来检查单词或文本的宽度是否大于特定区域，如果文本或单词的宽度大于特定区域的宽度可能 你已经溢出了。

（当我说“可能”是因为我不知道你在设计什么，例如在一个简单的

div

容器中，如果文本大于容器，则不会发生文本溢出并且文本最终会换行但如果单词比容器大，它就会溢出）。