改變尺寸<input>

我有一個文本框在我的HTML與白色底部邊框聚焦時，我希望它改變寬度的文本字段的當前文本的長度（當然有一些限制）。我試過CSS最小寬度和最大寬度，但它似乎什麼都不做。我認爲用JS實現它需要一個硬編碼的寬度表，我不想這樣做。改變尺寸<input>

編輯：
這只是簡單的CSS，但這裏的代碼：

#container { 
 
    width: 100%; 
 
    height: 52px; 
 
    background: #673ab7; 
 
} 
 

 
#textbox { 
 
    font-family: sans-serif; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    color: white; 
 
    background: none; 
 
    border: none; 
 
    vertical-align: top; 
 
    margin-top: 13px; 
 
    margin-left: 13px; 
 
    outline: none; 
 
} 
 

 
#textbox:focus { 
 
    border-bottom: 2px solid white; 
 
}

<div id="container"> 
 
    <input type="text" id="textbox" placeholder="placeholder" /> 
 
</div>

來源

2016-03-03 NieDzejkob

你的要價是有點不清楚什麼。直到你開始輸入，邊框的寬度是輸入的整個寬度嗎？如果你想邊界改變_as某人types_那麼你將需要使用JS。 – hungerstar

@ hungerstar對不起，我的意思是文本框的寬度... – NieDzejkob

我找到了一種方法，沒有任何寬度硬編碼後，我發現this。我在這裏使用jQuery是因爲我已經在我的項目中使用了它，但它應該比較容易將它移植到普通的JavaScript。像&,<,>和空格這樣的字符可能會出錯，所以需要用&...;編碼替換。

$(document).ready(function(){ 
 
    $('#textbox').on('input', function(){ 
 
    if($('#textbox').val().length == 0){ 
 
     $('#measure').html($('#textbox').attr('placeholder')); 
 
    }else{ 
 
     var text = $('#textbox').val(); 
 
     text = text.replace(/&/g, '&amp;'); 
 
     text = text.replace(/</g, '&lt;'); 
 
     text = text.replace(/>/g, '&gt;'); 
 
     text = text.replace(/ /g, '&nbsp;'); 
 
     $('#measure').html(text); 
 
    } 
 
    
 
    var w = $('#measure').width(); 
 
    if(w > 600) w = 600; 
 
    $('#textbox').width(w); 
 
    }); 
 
    
 
    $('#textbox').trigger('input'); 
 
});

html, body { 
 
    margin: 0; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    height: 52px; 
 
    background: #673ab7; 
 
} 
 

 
#textbox { 
 
    font-family: sans-serif; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    color: white; 
 
    background: none; 
 
    border: none; 
 
    vertical-align: top; 
 
    margin-top: 13px; 
 
    margin-left: 13px; 
 
    outline: none; 
 
} 
 

 
#textbox:focus { 
 
    border-bottom: 2px solid white; 
 
} 
 

 
#measure { 
 
    position: absolute; 
 
    visibility: hidden; 
 
    height: auto; 
 
    width: auto; 
 
    white-space: nowrap; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    font-family: sans-serif; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <input type="text" id="textbox" placeholder="placeholder" /> 
 
</div> 
 

 
<div id="measure"></div>

來源

2016-03-08 14:11:19 NieDzejkob

這應該工作不夠好：

<form> 
<input type="text" id="textfield" onkeyup="changeSize()"> 
</form> 

var sizeIs=20; 
function changeSize(){ 
sizeIs=sizeIs+5; 
document.getElementById("textfield").style.width= sizeIs+"px"; 
}

這樣做是什麼，每次用戶鍵入一個字符，函數f並且增加文本字段的大小。你可以用這個作爲指導去做你需要的任何事情。

來源

2016-03-03 17:01:17 durbnpoisn

謝謝，但使用硬編碼5px寬度不是我想要的。另外，退格將增加寬度，而不是減小寬度。但是，多虧了你，我意識到我需要**來使用JS，當時我只是想用它作爲最後的手段。 – NieDzejkob

改變尺寸<input>

回答

相關問題