javascript - 检测文本溢出：省略号是否在输入字段上处于活动状态

Question

我想知道是否有一种方法可以检测text-overflow:ellipsis输入字段是否处于活动状态，这样我就可以显示带有全文的工具提示。

CSS：

input[type='text']
{
    text-overflow:ellipsis;
}

html:

<input type="text" onmouseover="Tooltip.Show(this)" value="some long text" />

Javascript：

Tooltip.Show = function (input)
{
    // This is where i need the see if the current input show ellipsis.
    if ($(input).isEllipsisActive()) 
    {
        // Show the tooltip
    }
}

安德烈亚斯
_

---

请注意，这个问题是关于input元素的。一个普通的 HTML 元素（例如div）也必须有

white-space: nowrap;
overflow: hidden;

申请text-overflow: ellipsis;。（Overflow也可以是scroll或auto。）有关更多信息，请参阅此链接。

Answer 1

如果您想知道输入文本何时太长且隐藏......没有原生支持检查这样的想法。你可以破解它。您可以使用相同的文本制作一个 tmp 容器，查看该容器/文本的宽度并将其与输入的长度进行比较。如果 tmp 容器更长......你有太长的文本和。

像这样的东西：

function isEllipsisActive() {
  return_val = false;
  var text = $('input_selector').val();
  var html = "<span id="tmpsmp">" + text + "</span>";
  $(body).append(html);

  if($('input_selector').width() < $('#tmpsmp').width()) {
   return_val = true;
  }

  return return_val;
}

Answer 2

谢谢亚历山德连科。

刚刚编辑了一点你的解决方案：

 function isEllipsisActive(el) {
  return_val = false;
  var text = el.val();
  var html = "<span id='tmpsmp'>" + text + "</span>";
  $("body").append(html);

  if(el.width() < $('#tmpsmp').width()) {
   return_val = true;
  }
  $('#tmpsmp').remove();
  return return_val;
}