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

4顶
0踩

Web前端

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

2015-10-29 15:18 by 副主编 mengyidan1988 评论(3) 有8185人浏览
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不得不知道的事儿，请直接跳到描述的...

  • jsp物流信息网建设(源代码+论文)(2024vl).7z

    1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于计算机科学与技术等相关专业，更为适合；

  • 中小学教师教育教学情况调查表（学生家长用）.docx

    中小学教师教育教学情况调查表（学生家长用）

  • 航空车辆检测8-YOLO（v5至v11）、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rar

    航空车辆检测8-YOLO（v5至v11）、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rarTepegozz-V2 2024-04-21 12:16 pm ============================= *与您的团队在计算机视觉项目上合作 *收集和组织图像 *了解和搜索非结构化图像数据 *注释，创建数据集 *导出，训练和部署计算机视觉模型 *使用主动学习随着时间的推移改善数据集 对于最先进的计算机视觉培训笔记本，您可以与此数据集一起使用 该数据集包含4794张图像。 Tepegozz以可可格式注释。 将以下预处理应用于每个图像： *像素数据的自动取向（带有Exif-Arientation剥离） *调整大小为640x640（拉伸） 应用以下扩展来创建每个源图像的3个版本： *水平翻转的50％概率 *垂直翻转的50％概率 *随机裁剪图像的0％至20％ * -15和+15度之间的随机旋转 * 0到1.7像素之间的随机高斯模糊 *将盐和胡椒噪声应用于0.1％的像素 以下转换应用于每个图像的边界框： *以下90度旋转之一的同等概

Global site tag (gtag.js) - Google Analytics