爲什麼Chrome會忽略文本輸入的「大小」屬性？

以下尺碼屬性無任何效果。爲什麼？爲什麼Chrome會忽略文本輸入的「大小」屬性？

<input type="text" size="80" placeholder="blablabla bla lba bla bla bla blabla bla bla bla lba">

它默認爲60個字符，看起來我似乎沒有什麼可以改變這一點。

來源

2012-04-07 Rhubarb

想必您有一些造型影響它。沒有任何樣式規則，它works just fine。但是，當您應用尺寸較小的款式規則時，that takes precedence。

要弄清楚什麼樣式規則影響，請右鍵單擊它並選擇「檢查元素」，再看看右邊所示的樣式信息。

來源

2012-04-07 23:22:38

同樣在這裏http://jsfiddle.net/qyMLQ/ – 2012-04-07 23:23:43

如果這是真的，我可以添加一個內嵌式的，將過騎全局樣式，對不對？但那不行。 – Rhubarb 2012-04-08 02:15:41

@Rhubarb：是的，只要你覆蓋正確的風格。 – 2012-04-08 11:32:39

使用textarea元素input元素代替：

<textarea cols="80" rows="1" style="overflow: visible" placeholder= 
"blablabla bla lba bla bla bla blabla bla bla bla lba"></textarea>

這將產生更一致的，雖然不完全一致渲染。設置overflow: visible是爲了讓IE保留80個字符的空間，否則由於垂直滾動條，只有79個適合。

爲什麼這個問題似乎與input：

屬性size="80"領域的可見寬度設置爲80個字符的「平均」的寬度。這沒有完全定義（什麼「平均」？），並且瀏覽器甚至以不合邏輯的方式實現它：使用size="80"傾向於給出比寬度20個字符的4倍少得多的寬度。所以瀏覽器甚至不一致。這個比例取決於字體和瀏覽器。（這種情況在其他瀏覽器也是如此。）

如果需要使用input保留：

你可以使用style="width: 80ch"，但不是所有的瀏覽器都支持這個CSS3功能，而且也不能保證它已經實施正常。 ch單位根據定義爲數字零的前進寬度，'0'，其大部分字體與通常的數字的前進寬度相同。（例如，Firefox幾乎正確地實現了這一點，幾乎但不完全）

您可以將<input>元素中的字體設置爲一些等寬字體。這並不能消除這個問題，但它會使寬度更接近指定的寬度。

來源

2012-04-08 04:48:44

注意：'placeholder'屬性在HTML5中也是新的。要採用佔位符功能，請在編輯開始時通過JavaScript填寫textarea並刪除內容。 – Raptor 2012-04-08 04:51:17

@Shivan Raptor，'placeholder'屬性是一個明顯的問題，請不要將它與這個問題混淆。你提出的建議沒有解決問題，但會產生幾個問題，引入'placeholder'屬性來刪除它們。 – 2012-04-08 04:56:32

Informatice評論，謝謝！ +1 – 2012-10-08 15:34:39

由於護目鏡的Chrome 26在Mac OS上的獅子，不支持「CH」單元。對內聯樣式「width：16ch」進行檢查後，該樣式被標記爲「無效屬性值」。其他常見單位（pt，px，em，％）都可以接受。

來源

2013-04-12 22:31:07 Galo

如果你想知道爲什麼你可以進入 60個字符，這決定了有多少個字符被稱爲最大長度屬性：

MAXLENGTH

如果值了類型屬性是文本，電子郵件，搜索，密碼，電話或網址，此屬性指定用戶可以輸入的最大字符數（以Unicode代碼點數）;對於其他控制類型，它被忽略。它可以超過size屬性的值。如果沒有指定，用戶可以輸入不限數量的字符。指定負數會導致默認行爲;也就是說，用戶可以輸入不限數量的字符。只有在屬性的值已更改時纔會評估約束。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

尺寸僅確定在字符的寬度，而不是量用戶可以輸入。

來源

2014-11-21 16:28:48 mikemaccana

我有同樣的問題，並嘗試了很多其他解決方案後，我通過在輸入字段中添加一個寬度來解決此問題。

input { 
    width:90px; /* Your width may vary */ 
}

來源

2017-01-16 07:08:53 Chiwda

爲什麼Chrome會忽略文本輸入的「大小」屬性？

回答

相關問題