2

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も指定できます。) 詳細については、このリンクを参照してください。scrollauto

4

2 に答える 2

8

入力テキストが長すぎて隠れている場合を知りたい場合...チェックするためのネイティブサポートがない場合は、次のように考えます。あなたはそれをハックすることができます。同じテキストで 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;
}
于 2012-04-18T13:04:50.327 に答える
2

ありがとうアレクサンドレンコ。

ソリューションを少し編集しただけです：

 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;
}
于 2014-10-15T07:55:19.593 に答える