將HTML文本輸入寬度動態調整爲內容

我無法在此找到明確的答案，如果有我錯過了一個，請原諒我。將HTML文本輸入寬度動態調整爲內容

我希望我的文本輸入寬度能夠自動調整爲其內容的大小。首先使用佔位符文本而不是某人輸入的實際文本。

我已經創建了下面的例子。目前，這些框比我的佔位符文本大得多，導致了大量的空白空間，而且當我鍵入內容時顯然是同樣的事情。

我試過寬度自動，一些jQuery，和纏繞和泡泡糖我在互聯網上找到。但沒有任何工作。有什麼想法嗎？謝謝！

HTML：

CSS：

.form { 
    border: 0; 
    text-align: center; 
    outline: none; 
} 

span { 
    display: inline-block; 
} 

p { 
    font-family: arial; 
}

Fiddle

來源

2015-05-29 ObbyOss

還有就是要做到這一點沒有什麼好辦法。您必須編寫一個javascript函數來檢查輸入變化時字符串的長度，然後根據字符數*字符寬度來調整輸入的寬度。它看起來像代碼已經在這裏：http://stackoverflow.com/questions/3392493/adjust-width-of-input-field-to-its-input。只需調整輸入時的邏輯===''，然後根據佔位符設置寬度 –

觀察：您的姓名和年齡輸入不應該有相同的ID。 –

可能的解決方案已經在這裏討論：http：// stackoverflow。com/questions/9328682/jquery-resizing-form-input-based-value-width –

使用onkeypress事件甚至

看看這個例子：http://jsfiddle.net/kevalbhatt18/yug04jau/7/

<input id="txt" placeholder="name" class="form" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></span>

而對於負載使用jQuery 佔位和應用佔位大小輸入

$('input').css('width',((input.getAttribute('placeholder').length + 1) * 8) + 'px');

即使你可以用ID，而不是輸入的，這只是一個例子，讓我使用$（輸入）

而且在CSS提供最小寬度

.form { border: 1px solid black; text-align: center; outline: none; min-width:4px; }

編輯：

如果您從輸入框中的所有文本，然後它會使用採取佔位符值事件的內容

例：http://jsfiddle.net/kevalbhatt18/yug04jau/8/

$("input").focusout(function(){ if(this.value.length>0){ this.style.width = ((this.value.length + 1) * 8) + 'px'; }else{ this.style.width = ((this.getAttribute('placeholder').length + 1) * 8) + 'px'; } });

來源

2015-05-29 04:22:00

觀察：使用此代碼，一旦文本被清除，文本框的寬度就不會恢復正常。 –

是@vimala你對我做這一部分也 –

@vimala現在檢查這個更新的代碼，如果出現任何錯誤讓我知道：D –

一種可能的方式：

[contenteditable=true]:empty:before { 
 
    content: attr(placeholder); 
 
    color:gray; 
 
} 
 
/* found this online --- it prevents the user from being able to make a (visible) newline */ 
 
[contenteditable=true] br{ 
 
    display:none; 
 
}

<p>Hello, my name is <span id="name" contenteditable="true" placeholder="name"></span>. I am <span id="age" contenteditable="true" placeholder="age"></span> years old.</p>

CSS的源代碼：http://codepen.io/flesler/pen/AEIFc。

如果您需要表單的值，您將不得不採取一些技巧來提取值。

來源

2015-05-29 04:11:45

我其實很喜歡這種方法！ +1 – Incognito

好吧，你總是可以給它一個相關的類，然後循環所有那些基本上手動形式的seralize，然後你應該設置。 – Daemedeor

有趣的解決方案。從我+1。 –

凱文F是對的，沒有本地的方式來做到這一點。

如果你真的希望它發生，這是一種方法。

在代碼中，文本被放置在一個不可見的範圍內。然後我們檢索跨度的寬度。

https://jsfiddle.net/r02ma1n0/1/

var testdiv = $("#testdiv"); 
$("input").keydown(function(){ 
    var ME = $(this); 
    //Manual Way 
    //var px = 6.5; 
    //var txtlength = ME.val().length; 
    //$(this).css({width: txtlength * px }); 

    testdiv.html(ME.val() + "--"); 
    var txtlength = testdiv.width(); 
    ME.css({width: txtlength }); 
});

來源

2015-05-29 04:15:01

值得注意的是，div必須與輸入的風格非常相似，否則這種方式不會奏效。想想字體大小，例如 –

將HTML文本輸入寬度動態調整爲內容

回答

相關問題