显示输入字段溢出

Question

我有一些输入字段可以填充长电子邮件或URL，这些字段会被我在表单上允许的最大字段长度所截断。我已经看到了悬停在场上的形式使得该场的全部内容出现在边界之外，如下所示。

有谁知道这是怎么做的？我尝试给字段一个overflow-x：visible样式但是没有用。

感谢任何想法。

Answer 1

以此为例

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的/使用Javascript

$(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