有人擅長木匠活，有人擅長織毛衣。有人習(xí)慣避開90年代留下的HTML規(guī)則，可偏偏我就不是這種人。本文就來講一個我和input之間的故事：<input>是如何變成了一個混蛋的，以及它必死的原因。

早年歷史
1995年是值得大書特書的一年?！独嫌延洝?，《急診室的故事》，《希娜》火了起來。TLC憑借一首《Waterfalls》躍居榜首。瀏覽器是好的，因?yàn)镠TML很好。那時候有Mosaic,網(wǎng)景（Netscape）,和IE1，HTML2規(guī)范正在標(biāo)準(zhǔn)化。1995年也正是input標(biāo)簽誕生的一年，現(xiàn)在它已經(jīng)這么老了！都可以為它的年齡干一杯了，現(xiàn)在的確值得來好好談一談。

input誕生時有八種類型：text, password, checkbox, radio, image, hidden, submit 和 reset，隨后的一個RFC添加了file類型。

等等，你說……image？好吧，我們來談?wù)勥@個。

<input type="image" src="cat.png">看起來像一個圖片，但是實(shí)際上是一個圖片按鈕，點(diǎn)擊時會提交（x，y）坐標(biāo)，表示你點(diǎn)擊的圖片的位置。如果不指定src，按鈕會顯示“Submit”。如果使用的是火狐，會顯示”Submit Query”，如果使用IE，什么都不會顯示。

另外，type=input在默認(rèn)情況下只是一個空文本框，在Chrome，Safari和火狐瀏覽器中的指示信息分別是”No file chosen”、 “no file selected”和”No file selected”。

黑馬<textarea>
我一直認(rèn)為，input和textarea是不同時期的產(chǎn)物，這樣可以解釋他們?yōu)楹稳绱舜笙鄰酵ァ＿@種說法從某種意義上也講得通，input是從1993年在Mosaic上開始出現(xiàn)的，是INSIDE改進(jìn)的版本。他們都是HTML2的產(chǎn)物。HTML2標(biāo)準(zhǔn)規(guī)定，input是一個自關(guān)閉的標(biāo)簽，擁有一個value屬性，而textarea則需要關(guān)閉，有自己的內(nèi)容數(shù)據(jù)。他們的作用都是呈現(xiàn)可供編輯的文本框：

<input value="batman">
<textarea rows="1">batman</textarea>

update：有網(wǎng)友指出，<textarea>支持多行，但是換行符不能在value屬性中表示，所以它就采用了需要關(guān)閉的標(biāo)簽，中間包裹內(nèi)容數(shù)據(jù)的方式。這就說的通了。

1995-2011，緩慢發(fā)展的幾年
1999年，HTML4只添加了type="button".我最喜歡的特性是，在沒有自定義style的時候，將 <input type="button"> 和 <input type="button" value="Submit">寫在同一行，在Chrome/Safari/Edge瀏覽器中看起來不是垂直排列的：

然后一切都開始變糟了……
后來，2011年HTML5的input添加了大量的類型。但是現(xiàn)在已經(jīng)2015年了，大部分都還沒實(shí)現(xiàn)。這份“太長不看”的特性列表簡單來說，有下面幾點(diǎn)：type=color之只適用于Firefox/Chrome，date/time的input只能在Chrome/Edge/iOS上正常工作，還有，所有Chrome支持的特性O(shè)pera都支持。這里有一個所有input的demo。

下面我們來說點(diǎn)有意思的。

<input type="search">對于padding，border還有20世紀(jì)那該死的圓邊風(fēng)格的邊框有些隨意，在各個瀏覽器中的顯示效果完全是不可控制的：

如果你幸運(yùn)地使用了一個支持type="date"的瀏覽器，不用擔(dān)心輸入日期的樣式——::webkit預(yù)設(shè)了八種選擇器，但是只可以用于input輸入框的樣式，而不能用于下拉菜單。畢竟，CSS對你的身體不好。

當(dāng)你覺得不能更糟的時候，JavaScript來了
我了解所有CSS的古怪地方。我用Chrome工作了兩年，現(xiàn)在就靠著Blink團(tuán)隊旁工作，我知道我們所寫的各種渲染器都存在著各種各樣的bug。然而，<input>的API并不古怪——它只是一罐子蜘蛛，當(dāng)你打開罐子的那一瞬間，一切都太遲了。你被蜘蛛淹沒了，就連你的貓都成了蜘蛛。最好放把火吧。

從1995年開始，input的radio類型和checkbox類型有了額外的屬性checked，來判定是否選擇的狀態(tài)。這也意味著，所有別的input類型也有了這種屬性，HTMLInputElement可以包含HTMLInputElement，然后這一個里面又可以包含HTMLInputElement。所以下面這段代碼可以工作，即使毫無意義。

var textInput = document.querySelector('input[type="text"]');
console.log(textInput.checked);  // prints false.
textInput.checked = true;
console.log(textInput.checked);  // prints true.
// 沒有打開潘多拉.

酷。

input里也有文本，文本可以被選擇。所以HTMLInputElement原型可以定義兩種屬性selectionStart和selectionEnd，定義選擇區(qū)域：

document.querySelector(‘input’).selectionStart += 2;

這段代碼會事先在文本區(qū)域選擇兩個字符。但是只對text,url和password有用，對于別的類型，會拋出一個異常：

Uncaught DOMException: Failed to read the 'selectionStart'
property from 'HTMLInputElement': The input element's type ('number')
does not support selection.

即使文本可以被選擇：

所以這些無關(guān)緊要的特性在某些情況下能正常工作，有時候就不能。很好地破壞了API的一致性。

事情還要復(fù)雜的多。重點(diǎn)是，都過去21年了，瀏覽器在input上都沒有統(tǒng)一，在“如何表示用戶沒有選擇文件”上都沒有達(dá)成共識。

現(xiàn)在來想象一下，將來所有的Web組件都提供了原生支持，出現(xiàn)了一種新的標(biāo)準(zhǔn)<better-input>，真正包含DOM元素，而不再是div的大鍋粥。想象一下<better-input>在所有瀏覽器的樣式都統(tǒng)一，在任何地方看起來都一樣。好好做個美夢吧~ ?

原文鏈接：<input> I ? you, but you’re bringing me down
編譯：賴信濤，關(guān)注Python，喜歡編程和電子游戲。