1

我想知道如何调整文本框的大小以防止它附近的文本溢出。我一行中有 3 个元素，一个标签，一个文本框和一个按钮。但是，标签可以包含不同长度的单词。如果单词太长，它会将文本输入移到一边太远，并且按钮将溢出到下一行。为了保留页面的样式，我希望该按钮与其他 2 个元素保持在同一行。我试图让文本框缩小到必要的程度，以便为其他元素留出空间。我可以用 JQuery 做到这一点吗？

编辑：这是 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>

编辑：澄清一下，在使用页面时名称不会主动更改（仅在显示之前），但它会根据加载页面的人而有所不同。他们的用户名适合该标签。

4

1 回答 1

1

你不需要 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.
    }
}

您需要的唯一调整是修复我的错字（如果我做了任何错字），然后如果您想支持旧版本的 IE，您需要使用 addEventListener 的替代方法，谷歌它。

于 2013-08-22T18:51:30.783 回答