检测文本溢出：省略号在输入字段上是否有效 [英] Detect if text-overflow:ellipsis is active on input field

问题描述

我想知道有一种方法来检测 text-overflow：ellipsis 是否在输入字段上是活动的，所以我可以显示一个工具提示与全文。 / p>

Css：

 输入[type ='text'] 
 {
 text-overflow：ellipsis; 
} 
  

Html：

 < input type =textonmouseover =Tooltip.Show（this）value =some long text/& 
  

Javascript：

 code> Tooltip.Show = function（input）
 {
 //这是我需要看看当前输入是否显示省略号。 
 if（$（input）.isEllipsisActive（））
 {
 //显示工具提示
} 
} 
  
 
 
 
 BR 
 
 Andreas 
解决方案
如果你想知道什么时候输入文本太长和隐藏...没有本地支持检查想像这样。你可以攻击它。您可以使用相同的文本创建一个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; 
} 
  
 
I am wondering it there is a way to detect if text-overflow:ellipsis is active on an input field so i can show a tooltip with the full text.

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

Andreas
解决方案
If you want to know when the input text is too long and hidden ... there is no native support for checking thinks like this. You can hack it. You can make a tmp container with the same text, look the width of that container/text and compare it with the length of the input. If the tmp container is longer ... you have too long text and.

something like this:
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;
}


                        
这篇关于检测文本溢出：省略号在输入字段上是否有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！