입력 필드 오버 플로우 표시

-2

양식에 허용 할 수있는 최대 필드 길이만큼 잘린 긴 전자 메일 또는 URL로 채울 수있는 입력 필드가 있습니다. 필드 위로 마우스를 가져 가면 필드의 전체 내용이 아래처럼 바운드 리 외부에 표시되는 양식을 보았습니다.입력 필드 오버 플로우 표시

enter image description here

사람은이 작업을 수행하는 방법을 알고 있나요? 필드에 overflow-x : visible 스타일을 지정하려고 시도했지만 작동하지 않았습니다.

어떤 아이디어 주셔서 감사합니다.

출처

2013-12-12 Steve

버그를 사용할 수 있습니다 함께 놀러 싶어하면 ... – zzlalani

당신은 오버 플로우-X를 건가요 : 보이는이 일을해야합니까? 최신 Chrome 브라우저를 실행하고 있습니다. – Steve

아니, 텍스트 상자를 감싸는 텍스트가 정상적인 동작이 아니라는 것을 의미합니다. 다른 브라우저에서도 확인하십시오. – zzlalani

)이 예를

HTML

<input type=text value="http://www.woolworthsglobalroaming.com.au"> 
<span>http://www.woolworthsglobalroaming.com.au</span>

CSS

span, input{ 
    font-family:Arial; 
    font-size:1em; 
    padding:5px 10px; 
} 

span{ 
    position:absolute; 
    left:15px; 
    top:12px; 
    z-index:3; 
    display:none; 
}

jQuery를/자바 스크립트

$(function(){ 
    $('input').mouseover(function(){ 
     var val = $(this).val(); 
     $(this).val(''); 
     $('span').show(); 
    }); 

    $('input').mouseout(function(){ 
     var val = $('span').text(); 
     $(this).val(val); 
     $('span').hide(); 
    });

}을 가지고;

당신은 할 수 귀하의 브라우저에서이 jsfiddle

출처

2013-12-12 06:37:01 Leo

입력 필드 오버 플로우 표시

답변

관련 문제