텍스트 오버 플로우 : 입력란에서 줄임표가 활성화되어 있는지 감지합니다.

Question

text-overflow:ellipsis이 입력 필드에서 활성화되어 있는지 감지하여 전체 텍스트와 함께 툴팁을 표시 할 수 있는지 궁금합니다.

CSS는 :

input[type='text'] 
{ 
    text-overflow:ellipsis; 
} 

HTML :

<input type="text" onmouseover="Tooltip.Show(this)" value="some long text" /> 

자바 스크립트 :

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. 응용 프로그램이 복잡한 CSS 규칙이있는 경우

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