1. 程式人生 > >懸浮顯示input中所有的內容

懸浮顯示input中所有的內容

專案中經常會遇到這個問題,在一個內容框中,由於框的寬度是固定的,但是裡面的內容卻有很多,那麼這個時候需求裡就要求第一,多餘的字要以點點點的形式隱藏,第二,當滑鼠移上去的時候要以title提示的方式顯示文字框裡的所有內容。實現的方式如下

點點點,文字溢位之前有寫到。給文字框新增如下樣式

<style type="css/text">
	.myStyle {
		display:inline-block; //這個看情況加 
    	white-space:nowrap; //必須
    	overflow:hidden; //必須
   		text-overflow:ellipsis; //必須
	}
</style>


而title提示則要在input新增以下程式碼,這樣既可實現用title提示文字框中所有內容
<input class="myStyle" onmouseover="this.title=this.value"/>
 
補充:
在ie8中,select用這個方法還不能正常的提示文字,寫了個函式呼叫才正常顯示
 

<select onmouseover="selbox($(this))" ></select>
<script>
   function selbox(a){
      var val = a.val();
      a.attr("title",val);
   }
</script>