资讯频道 → Web前端
阅读更多

4顶
0踩

Web前端

原创新闻 我与<input>不得不说的事儿

2015-10-29 15:18 by 副主编 mengyidan1988 评论(3) 有8207人浏览
HTML 前端开发

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

有人擅长木匠活，有人擅长织毛衣。有人习惯避开90年代留下的HTML规则，可偏偏我就不是这种人。本文就来讲一个我和input之间的故事：<input>是如何变成了一个混蛋的，以及它必死的原因。

早年历史
1995年是值得大书特书的一年。《老友记》，《急诊室的故事》，《希娜》火了起来。TLC凭借一首《Waterfalls》跃居榜首。浏览器是好的，因为HTML很好。那时候有Mosaic,网景（Netscape）,和IE1，HTML2规范正在标准化。1995年也正是input标签诞生的一年，现在它已经这么老了！都可以为它的年龄干一杯了，现在的确值得来好好谈一谈。

input诞生时有八种类型：text, password, checkbox, radio, image, hidden, submit 和 reset，随后的一个RFC添加了file类型。

等等，你说……image？好吧，我们来谈谈这个。

<input type="image" src="cat.png">看起来像一个图片，但是实际上是一个图片按钮，点击时会提交（x，y）坐标，表示你点击的图片的位置。如果不指定src，按钮会显示“Submit”。如果使用的是火狐，会显示”Submit Query”，如果使用IE，什么都不会显示。



另外，type=input在默认情况下只是一个空文本框，在Chrome，Safari和火狐浏览器中的指示信息分别是”No file chosen”、 “no file selected”和”No file selected”。

黑马<textarea>
我一直认为，input和textarea是不同时期的产物，这样可以解释他们为何如此大相径庭。这种说法从某种意义上也讲得通，input是从1993年在Mosaic上开始出现的，是INSIDE改进的版本。他们都是HTML2的产物。HTML2标准规定，input是一个自关闭的标签，拥有一个value属性，而textarea则需要关闭，有自己的内容数据。他们的作用都是呈现可供编辑的文本框： 
<input value="batman">
<textarea rows="1">batman</textarea>

update：有网友指出，<textarea>支持多行，但是换行符不能在value属性中表示，所以它就采用了需要关闭的标签，中间包裹内容数据的方式。这就说的通了。

1995-2011，缓慢发展的几年
1999年，HTML4只添加了type="button".我最喜欢的特性是，在没有自定义style的时候，将 <input type="button"> 和 <input type="button" value="Submit">写在同一行，在Chrome/Safari/Edge浏览器中看起来不是垂直排列的：

然后一切都开始变糟了……
后来，2011年HTML5的input添加了大量的类型。但是现在已经2015年了，大部分都还没实现。这份“太长不看”的特性列表简单来说，有下面几点：type=color之只适用于Firefox/Chrome，date/time的input只能在Chrome/Edge/iOS上正常工作，还有，所有Chrome支持的特性Opera都支持。这里有一个所有input的demo。

下面我们来说点有意思的。

<input type="search">对于padding，border还有20世纪那该死的圆边风格的边框有些随意，在各个浏览器中的显示效果完全是不可控制的：



如果你幸运地使用了一个支持type="date"的浏览器，不用担心输入日期的样式——::webkit预设了八种选择器，但是只可以用于input输入框的样式，而不能用于下拉菜单。毕竟，CSS对你的身体不好。

当你觉得不能更糟的时候，JavaScript来了
我了解所有CSS的古怪地方。我用Chrome工作了两年，现在就靠着Blink团队旁工作，我知道我们所写的各种渲染器都存在着各种各样的bug。然而，<input>的API并不古怪——它只是一罐子蜘蛛，当你打开罐子的那一瞬间，一切都太迟了。你被蜘蛛淹没了，就连你的猫都成了蜘蛛。最好放把火吧。

从1995年开始，input的radio类型和checkbox类型有了额外的属性checked，来判定是否选择的状态。这也意味着，所有别的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，定义选择区域： 
document.querySelector(‘input’).selectionStart += 2;

这段代码会事先在文本区域选择两个字符。但是只对text,url和password有用，对于别的类型，会抛出一个异常： 
Uncaught DOMException: Failed to read the 'selectionStart'
property from 'HTMLInputElement': The input element's type ('number')
does not support selection.

即使文本可以被选择：



所以这些无关紧要的特性在某些情况下能正常工作，有时候就不能。很好地破坏了API的一致性。

事情还要复杂的多。重点是，都过去21年了，浏览器在input上都没有统一，在“如何表示用户没有选择文件”上都没有达成共识。

现在来想象一下，将来所有的Web组件都提供了原生支持，出现了一种新的标准<better-input>，真正包含DOM元素，而不再是div的大锅粥。想象一下<better-input>在所有浏览器的样式都统一，在任何地方看起来都一样。好好做个美梦吧~ ✨

原文链接：<input> I ♡ you, but you’re bringing me down
编译：赖信涛，关注Python，喜欢编程和电子游戏。个人博客：http://www.kawabangga.com/
  • 大小: 76.8 KB
  • 大小: 6.3 KB
  • 大小: 20.2 KB
  • 大小: 9.1 KB
来自: 极客头条
4
顶
0
踩
评论 共 3 条 请登录后发表评论
3 楼 oaklet 2015-10-30 14:06
神翻译，牛
2 楼 yunzhongxia 2015-10-30 09:25
翻译的真别扭
1 楼 yebn 2015-10-29 20:49
     

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • java 跨域 下载文件_node实现文件下载不得不说的那些事儿

    这几天一直在做远程文件下载的事，现在总算有了解决，特来记录一下踩过的坑和想揍自己的心需求应用场景是这样的，底层逻辑数据请求接口是由Java写的，也就是说原始文件存在Java服务端,返回时有加密措施由于工作需要...

  • Java8操作

    } //Predicate传递判断的方法 public static List filterApples(List inventory, Predicate p){ List result = new ArrayList&lt;&gt;(); for(Apple apple : inventory){ //test测试 if(p.test(apple)){ result.add(apple...

  • 【技术分享】关于Python漏洞挖掘那些不得不提的事儿

    前言 Python因其在开发更大、更复杂应用程序方面独特的...这篇文章的主要受众是还不太熟悉Python的人，其中会提及少量与安全有关的行为以及有经验开发人员遵循的规则。 输入函数 在Python2强大的内置函数中，输入...

  • 防火墙阻止tftp_防火墙管理那些不得不知道的事儿！

    [Y/N]:y Please input the file name(*.cfg)[cfa0:/startup.cfg] (To leave the existing filename unchanged, press the enter key): //Enter cfa0:/startup.cfg exists, overwrite? [Y/N]:y Validating file. ...

  • HTML最给力的入门教程

    第一章 HTML概述与基本结构  一、HTML的概述     HTML的英语意思是：HypertextMarked Language，即超文本标

  • 关于Python漏洞挖掘那些不得不提的事儿

    前言 Python因其在开发更大、更复杂应用程序方面独特的便捷性，使得它在计算机环境中变...这篇文章的主要受众是还不太熟悉Python的人，其中会提及少量与安全有关的行为以及有经验开发人员遵循的规则。 输入函数 在P...

  • c语言枚举类型有什么作用,关于C语言枚举类型不得不说的故事

    经济学家说过，路边是不会有100元的，但是如果有，你还是要捡起来。本文引用地址：http://www.eepw.com.cn/article/202005/413512.htm同理，在貌似万物免费的网络时代，你是很难找到有针对性的好资料的，但是如果有...

  • SCAU 9501 ACMer不得不知道的事儿

    9501 ACMer不得不知道的事儿 时间限制:1000MS 内存限制:65535K 提交次数:0 通过次数:0 题型: 编程题 语言: 无限制 Description 作为一个入门的ACMer，在参加比赛之前，你势必要了解比赛的一些基本规则，例如一...

  • SCAU 10675 ACMer不得不知道的事儿(二)

    10675 ACMer不得不知道的事儿(二) 时间限制:1000MS 内存限制:65535K 提交次数:0 通过次数:0 题型: 编程题 语言: 无限制 Description 作为一个入门的ACMer，在参加比赛之前，你势必要了解算法的一些基本概念，...

  • 关于 Vue.js 的那些事儿

    15年开始，在各大论坛技中，与 Vue.js 这一相关词语的内容爆炸式增长，在前端技术增速中独领风骚，迅速成为前端三巨头之一。记得在某个社区中有人这样介绍三巨头“来自 Google 的 Angular，来自 Facebook 的 React，...

  • .NET中那些所谓的新语法之三：系统预定义委托与Lambda表达式

    开篇：在上一篇中，我们了解了匿名类、匿名方法与扩展方法等所谓的新语法，这一篇我们继续征程，看看系统预定义委托（Action/Func/Predicate）和超爱的Lambda表达式。为了方便码农们，.Net基类库针对实际开发中最...

  • 【Vue教程】01：入门前的概述：关于VUE那些事儿

    从去年开始，在各大论坛技中，与 Vue.js 这一相关词语的内容爆炸式增长，在前端技术增速中独领风骚，迅速成为前端三巨头之一。记得在某个社区中有人这样介绍三巨头“来自 Google 的 Angular，来自 Facebook 的 React...

  • Android开发之Sensors与摇一摇

    List&lt;Sensor&gt; deviceSensors = mSensorManager.getSensorList(Sensor.TYPE_ALL); //....................处女分割线......................... private SensorManager mSensorManager; ... mSensorManager = ...

  • 闲聊linux中的input设备

    至于这三者之间的区别，我就不在这啰嗦了，Google一下一大堆。我要强调的是，无论上面三个设备中的任何一种设备，要想在linux实现它的设备驱动，首先要对它进行一系列的初始化工作，然后需给它提供一个设备操作集合...

  • 闲聊linux中的input设备(转)

    至于这三者之间的区别，我就不在这啰嗦了，Google一下一大堆。我要强调的是，无论上面三个设备中的任何一种设备，要想在linux实现它的设备驱动，首先要对它进行一系列的初始化工作，然后需给它提供一个设备操作集合...

  • SCAU 10685 ACMer不得不知道的事儿（一）-----续

    10685ACMer不得不知道的事儿（一）-----续 时间限制:1000MS 内存限制:65535K提交次数:0 通过次数:0 题型: 编程题语言: 无限制 Description 如果你完成了10年那题ACMer不得不知道的事儿，请直接跳到描述的...

  • 人力资源经理绩效考核表.xls

    人力资源经理绩效考核表

  • 智慧环卫管理平台建设方案Word(211页).docx

    一、智慧环卫管理平台的建设背景与目标 智慧环卫管理平台的建设源于对环卫管理全面升级的需求。当前，城管局已拥有139辆配备车载GPS系统、摄像头和油耗传感器的环卫车辆，但环卫人员尚未配备智能移动终端，公厕也缺乏信息化系统和智能终端设备。为了提升环卫作业效率、实现精细化管理并节省开支，智慧环卫管理平台应运而生。该平台旨在通过信息化技术和软硬件设备，如车载智能终端和环卫手机App，实时了解环卫人员、车辆的工作状态、信息和历史记录，使环卫作业管理透明化、精细化。同时，平台还期望通过数据模型搭建和数据研读，实现更合理的环卫动态资源配置，为环卫工作的科学、健康、持续发展提供决策支持。 二、智慧环卫管理平台的建设内容与功能 智慧环卫管理平台的建设内容包括运行机制体制建设、业务流程设计、智慧公厕系统建设、网络建设、主机和储存平台需求、平台运维管理体系、硬件标准规范体系以及考核评价体系等多个方面。其中，智慧公厕系统建设尤为关键，它能实时监控公厕运行状态，保障公厕的清洁和正常运行。平台建设还充分利用了现有的电子政务网络资源，并考虑了有线和无线网络的需求。在功能上，平台通过普查、整合等手段全面收集环卫车辆、企业、人员、设施、设备等数据，建立智慧环卫基础数据库。利用智能传感、卫星定位等技术实现环卫作业的在线监管和远程监控，实现对道路、公共场所等的作业状况和卫生状况的全面监管。此外，平台还建立了环卫作业网格化管理责任机制，实现从作业过程到结果的全面监管，科学评价区域、部门、单位和人员的作业效果。 三、智慧环卫管理平台的效益与风险规避 智慧环卫管理平台的建设将带来显著的环境、经济和管理效益。环境方面，它将有力推进环境卫生监管服务工作，改善环境卫生状况，为人民群众创造更加清洁、卫生的工作和生活环境。经济方面，通过智慧化监管，大大降低了传统管理手段的成本，提高了监管的准确性和效率。管理方面，平台能够追踪溯源市民反映的问题，如公厕异味、渣土车辆抛洒等，并找到相应的责任单位进行处置，防止类似事件再次发生。同时，平台还拥有强大的预警机制功能，能够在很多环卫问题尚未出现前进行处置。然而，平台建设也面临一定的风险，如部门协调、配合问题，建设单位选择风险以及不可预测的自然灾害等。为了规避这些风险，需要加强领导、统一思想，选择优秀的系统集成商承接项目建设，并做好计算机和应用系统的培训工作。同时，也要注意标准制定工作和相关法律法规的制定工作，以保证系统建设完成后能够真正为环卫管理工作带来便利。

  • apache-parent-10-14.el7.x64-86.rpm.tar.gz

    1、文件内容：apache-parent-10-14.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/apache-parent-10-14.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装

Global site tag (gtag.js) - Google Analytics