检测是否文本溢出：省略号是在输入场活跃(Detect if text-overflow:ellips

我想知道它有一种方法来检测，如果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;
}

Answer 2:

谢谢Aleksandrenko。

只需编辑有点您的解决方案：

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

文章来源: Detect if text-overflow:ellipsis is active on input field