Detect if text-overflow:ellipsis is active on input field

Question

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

---

Please note, this question is about input element. A normal HTML element (e.g., div) also has to have

white-space: nowrap;
overflow: hidden;

for text-overflow: ellipsis; to apply. (Overflow can also be scroll or auto.) See this link for more information.

Anfractuous

Answer 1

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

Rolph

It won't work if the application has complex css rules there. – Wonderful

Answer 2

Thanks Aleksandrenko.

Just edited a little your solution:

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

Latia