如何動態調整html文本框的大小以避免溢出？

我想知道如何調整文本框的大小，以防止它附近的文本溢出。我在一行中有3個元素，一個標籤，一個文本框和一個按鈕。然而，標籤可以具有不同長度的單詞。如果這個單詞太長，它會將文本輸入過度移動到一邊，並且按鈕會溢出到下一行。爲了保持頁面的風格，我寧願按鈕與其他2個元素保持在同一行。我試圖讓文本框只收縮儘可能多的空間讓其他元素。我可以用JQuery做到這一點嗎？如何動態調整html文本框的大小以避免溢出？

編輯：這裏的JFiddle事情： http://jsfiddle.net/425ve/2/ 和這裏的主要代碼：

<html> 
<head> 
<style> 
body{ 
background-color:#000000; 
color:#cccccc; 
} 
#chatbox{ 
width:100%; 
height:85%; 
border-style:solid; 
border-color:#000000; 
overflow:auto; 
} 
#mainchat{ 
width:82%; 
float:left; 
margin:0; 
} 
#sidebar{ 
float:left; 
height:97%; 
width:17%; 
border-style:dashed; 
border-width:1px; 
border-color:#AAAAAA; 
border-right:0; 
border-top:0; 
border-bottom:0; 
overflow:auto; 
} 
#topbar{ 
border-style:dashed; 
border-width:1px; 
border-color:#AAAAAA; 
border-left: 0; 
    border-top: 0; 
    float:left; 
    width:82%; 
} 
a{ 
color:#cccccc; 
text-decoration:none; 
} 
a:hover{ 
color:#CCCCEE; 
background-color:111122; 
} 
#topbarname{ 
float:right; 
} 
#message{ 
width: 90%; 
background-color:#000000; 
border-color:#CCCCCC; 
border-style:solid; 
border-width: 1px; 
color:CCCCCC; 
} 
#submitbutton{ 
background-color:#000000; 
border-color:#CCCCCC; 
border-style:solid; 
border-width: 1px; 
color:#CCCCCC; 
} 
</style> 
<script> 
function getCookie(name) { 
    var dc = document.cookie; 
    var prefix = name + "="; 
    var begin = dc.indexOf("; " + prefix); 
    if (begin == -1) { 
     begin = dc.indexOf(prefix); 
     if (begin != 0) return null; 
    } 
    else 
    { 
     begin += 2; 
     var end = document.cookie.indexOf(";", begin); 
     if (end == -1) { 
     end = dc.length; 
     } 
    } 
    return unescape(dc.substring(begin + prefix.length, end)); 
} 

function doSomething() { 
    var myCookie = getCookie("IceID"); 

    if (myCookie == null) { 
     window.location="login.php" 
    } 
    else { 
     // do cookie exists stuff 
    } 
} 
doSomething(); 
</script> 
</head> 
<body> 
<div id="topbar"> 
| Information | Logs | characters | Profile | Private logs | Messages | <a href="logout.php">Logout</a> | 
</div> 
<div id="mainchat"> 
<div id="chatbox"> 
<?php 
include("getpost.php"); 
//improve this with AJAX! 
?> 
</div> 
<div id="input"> 
<form id="inputchat"> 
<b id="name"> 
<?php 
echo $_COOKIE['IceID']; 
?> 
</b> 
<input type="text" name="message" id="message"></input> 
<input type="submit" id="submitbutton" value="say"></input> 
</form> 
</div> 
<div id="utools"> 
</div> 
</div> 
<div id="sidebar"> 
<div id="title"> 
A 
</div> 
<div id="list"> 
</div> 
</div> 
</body> 
</html>

編輯：澄清，該名稱不會主動改變，而正在使用的頁面（唯一正確的是前顯示），但取決於誰加載頁面會有所不同。他們的用戶名符合該標籤。

來源

2013-08-22 ZCoder

你能否提供你的代碼，甚至更好，創建一個[Fiddle]（http://www.jsfiddle.net'）。 – LinkinTED

大部分時間你只需要添加溢出：auto;在容器的CSS。 – cocco

根據您的設置，您可以製作標籤'inline-block'並給它一個最大寬度。 –

你不需要jQuery。 jQuery可以使它更簡單。我更喜歡香草。

var left = document.getElementById('name') 
var resizable = document.getElementById('message') 
var right = document.getElementById('submitbutton') 
realign() 
window.addEventListener('resize', realign) 
function realign() { 
    resizable.style.width = '0' 
    var extraWidth = getWidth(resizable) // Measure the border and padding on it's own. 
    resizable.style.width = getWidth(resizable.parentNode) - getWidth(left) - getWidth(right) 
    function getWidth(element) { // Superior to offsetWidth because it measures fractions of a pixel which is even more relevant when using the browser zoom feature. 
     var rect = element.getBoundingClientRect() // A accurate way to measure location on the screen. 
     return rect.right - rec.left // The accurate width. 
    } 
}

你需要將解決我的錯字（S），如果我做任何然後如果你想支持舊版本的IE，你需要使用替代的addEventListener，谷歌它的唯一調整。

來源

2013-08-22 18:51:30

Firefox說：「TypeError：resizable爲null」 – ZCoder

resizable爲null，因爲在腳本運行時沒有帶ID消息的元素*。如果將<腳本移動到

謝謝，它現在完美:) – ZCoder

如何動態調整html文本框的大小以避免溢出？

回答

相關問題