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

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
    }
}

BR
安德烈亚斯

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;
}