Onclick展開文本框寬度

Question

我想使用jQuery在onclick期間擴展輸入文本框的寬度。

例如，如果輸入的默認寬度爲100px，那麼當用戶點擊它進行輸入時，它將展開爲150px的寬度。

可以做到這一點嗎？

謝謝。

Answer 1

這裏有那個的jsfiddle動畫的updated example，並返回到上模糊的默認大小。

僅供參考，請參閱jQuery Animate文檔。

Answer 2

當然。比方說你有

<input id="mytextbox" /> 

你可以做

$("#mytextbox").focus(function(){ 
    $(this).width(150) 
}); 

Answer 3

這裏是一個基於@ wsanville示例並具有所需延遲的工作示例。 （請注意我還添加返回它在失去重心的效果，你可以刪除快捷）

Working Example

**編輯的文本框的大小

Answer 4

<input type="text" id="tbText" size="30px"/>  

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#tbText').focus(function() { 
      $('#tbText').css("width", "250px"); 
     }); 
     $('#tbText').blur(function() { 
      $('#tbText').css("width", "150px"); 
     }); 
    }); 
</script> 

Answer 5

我想通過刪除保存原始大小的額外步驟，構建@ wsanville的示例。動畫還可以採用字符串值，例如「+ = 50」或「 - = 50」來增加/減少寬度。

See in in action on jsfiddle

$('#box').focus(function() 
{ 
    $(this).animate({ width: '+=50' }, 'slow'); 
}).blur(function() 
{ 
    $(this).animate({ width: '-=50' }, 'slow'); 
}); 

Answer 6

我知道這是一個有點遲到了，但如果有人想使用的純CSS解決方案：調焦的屬性。

#textbox { 
    width:100px; 
    transition: 0.5s; 
} 

#textbox:focus { 
    width:150px; 
    transition: 0.5s; 
} 

他是我的jsfiddle：

https://jsfiddle.net/qo95uquv/

湯姆