流體寬度的單行textarea

我想創建一個流體寬度textarea裏面的div。 div的寬度至少應爲3em，最多爲12em，否則寬度應與textarea完全相同。我有這個工作。 See fiddle。流體寬度的單行textarea

當textarea填滿div時，它會創建一個換行符而不是向左溢出，這是我要去做的效果。任何想法如何實現這一目標？

編輯：此編碼是基於A List Apart's article on Expanding Text Areas。

HTML

<div><pre><span></span><br></pre> 
    <textarea autofocus placeholder='Note'></textarea> 
</div>

CSS

div { 
    border: 1px solid grey; 
    position: relative; 
    display: inline-block; 
/*  overflow: hidden; */ 
    height: 1.3rem; 
    min-width: 3rem; 
    max-width: 12rem; 
} 
textarea { 
    border: 1px solid blue; 
    resize: none; 
    background: rgba(0,0,255,.5); 
    padding: 0; 
    width: 100%; 
} 
textarea, pre { 
    position: absolute; 
    top: 0; 
    right: 0; 
    height: 100%; 
    margin: 0; 
/*  visibility: hidden; */ 
} 
pre { 
    border: 1px solid pink; 
    position: relative; 
    max-width: 100%; 
} 
* { 
    font: 1rem arial; 
}

var textarea = document.querySelector('textarea'); 
var span = document.querySelector('span'); 
textarea.addEventListener('input', function() { 
    span.textContent = textarea.value; 
});

來源

2014-04-01 willlma

如果它只有一條線，爲什麼不使用輸入框？ – DrLivingston

您是否將文本以某種方式再次複製到輸入框？在一個單獨的JSFiddle中將CSS降到最低限度，然後嘗試一下...你可能會看到更好的結果。 – Joshua

@DrLivingston該文本框有時用於多行輸入，我希望通過改變CSS類來在多行和單行模式之間切換。 – willlma

在你的CSS使用：

white-space: nowrap; 
overflow: hidden;

編輯不贊成這種方式：你可以設置wrap="off"作爲對textarea屬性？

編輯：說溢出：隱藏; （每個評論如下）original：overflow：auto;

來源

2014-04-02 00:56:31 DrLivingston

我怎麼能忽略這個？謝謝。它應該是'overflow：hidden'。請更新答案，我會接受它。請參閱[更新的小提琴]（http://jsfiddle.net/8ny99/2/）。 – willlma

在問題中，我確實要求向左溢出，但我不打算讓它看到。對困惑感到抱歉。 – willlma

流體寬度的單行textarea

回答

相關問題