Определить, активен ли text-overflow: многоточие в поле ввода

Мне интересно, есть ли способ определить, активен ли 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
Андреас

Обратите внимание, что этот вопрос касается элемента input. Обычный элемент HTML (например, div) также должен иметь

white-space: nowrap;
overflow: hidden;

для text-overflow: ellipsis; применить. (Overflow также может быть scroll или auto.) См. эту ссылку за дополнительной информацией.


javascript css tooltip ellipsis
person Andreas    schedule 18.04.2012    source источник

Ответы (2)


arrow_upward
8
arrow_downward

Если вы хотите знать, когда вводимый текст слишком длинный и скрытый ... нет встроенной поддержки проверки, думаю, как это. Вы можете взломать его. Вы можете создать контейнер 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;
}
person Aleksandrenko    schedule 18.04.2012
comment
Это не сработает, если в приложении есть сложные правила css. - person huan feng; 05.04.2016

arrow_upward
2
arrow_downward

Спасибо Александренко.

Просто немного отредактировал ваше решение:

 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;
}
person tinny77    schedule 15.10.2014