广州网页设计：设计一个完整的文本框

曾经花了一个小时（甚至一天）来处理一些事情，只是为了扔掉所有的东西并在五分钟内重做它？这不仅仅是初学者的代码错误; 这是一个现实世界的情况，你可以很容易地找到自己，特别是如果你试图解决的问题开始时没有被很好地理解。

这就是为什么我是前期设计，用户研究以及经常创建多个原型的大力支持者 - 也被称为“你不知道你不知道什么。”的古老格言。同时，它很容易看到别人制造的东西，这可能花费了很多时间，并且认为它非常容易，因为你看到成品后有后见之明的好处。

在谈到CSS Grid和Piet Mondrian的绘画时，Jen Simmons很好地总结了这个简单易懂的想法：

“我觉得这些画作，你知道，如果你看起来像'为什么那么重要？我本可以做到的。“ 就像是，好吧，你今天可以画画，因为我们已经习惯了这种想法，但当你周围的一切都是维多利亚时代的时候你会画出这一点吗 - 当你周围的一切都是另一种风格时？“

我觉得这总结了我对看到完全合理的网站和设计系统的感觉; 这几乎就像他们有意义的事实意味着他们很容易做出来。当然，通常情况正好相反; 编写代码很简单，但最重要的是思考和过程。

广州网页设计考虑到这一点，我将探索构建一个文本框，夸大我们许多人经常发现的情况。希望在本文结束时，我们都能更加强调从一开始的旅程完成很少是线性的。

简要

我们都知道，仔细规划和理解用户需求对于任何规模的成功项目都很重要。我们都知道，我们常常需要急于快速设计和开发新功能。这往往意味着我们的常识和最佳实践被遗忘，因为我们在快速进入永久待办事项清单上的下一个任务。冲洗并重复。

今天我们的任务是建立一个文本框。很简单，它需要允许用户键入一些文本。事实上，它是如此简单，我们让任务持续，因为还有很多其他重要的事情要做。然后，在我们打包回家之前，我们假笑并写道：

<input type="text">

我们去！

哦等等，我们可能需要在提交表单时将数据连接到后端，如下所示：

<input type="text" name="our_textbox">

那更好。完成。该回家了。

你如何添加新线？

使用简单文本框的问题是，如果要键入大量文本，它就没用了。对于名称或标题，它可以正常工作，但用户通常会输入比您预期更多的文本。相信我，如果你在没有严格验证的情况下长时间留下文本框，有人会粘贴整个战争与和平。在许多情况下，可以通过拥有最大字符数来防止这种情况。

然而，在这种情况下，我们发现我们将其留在最后一分钟的懒惰（或不好的优先次序）意味着我们没有考虑真正的要求。我们只想在永恒的待办事项列表上做另一项任务并回家。此文本框需要可重用; 其用法的示例包括作为内容输入框，Twitter样式的注释框和用户反馈框。在所有这些情况下，用户可能会输入大量文本，而基本文本框只会向侧面滚动。有时这可能没问题，但一般来说，这是一次非常糟糕的经历。

值得庆幸的是，这个简单的错误并不需要很长时间才能解决：

<textarea name="our_textbox"></textarea>

现在，让我们花点时间考虑一下这条线。答<textarea>：尽可能简单，无需删除名称即可。是不是很有趣，或者只是我的迂腐思想，我们需要使用一个完全不同的元素来添加新的线条？它不是一种输入，也不是用于向输入添加多行的属性。此外，<textarea>元素不是自动关闭，但输入是？奇怪。

这个“考虑的时刻”让我有时间回到1993年10月，浏览了www-talk邮件列表的深度。关于网络的未来和“HTML +”应包含的内容显然有很多讨论。这是1993年，他们正在讨论诸如<input type="range">HTML5之前无法提供的想法，Jim Davis说：

“嗯，我认为这很牵强，但你可能会使用HTML表单作为游戏界面的一部分。”

这确实表明网络不仅仅是人们普遍认为的文档。马克·安德森建议有<input type="textarea">代替允许单线新线text类型，说：

“使浏览器代码更清晰 - 必须在内部以不同的方式处理它们。”

这是<textarea>与文本分开的公平理由，但这仍然不是我们最终的结果。那为什么<textarea>它自己的元素呢？

我没有在邮件列表档案中找到任何决定，但在接下来的一个月，HTML +讨论文档中有<textarea>元素和说明：

“在表单的初始设计中，INPUT元素支持多行文本字段，TYPE = TEXT。不幸的是，这会导致具有长文本值的字段出现问题，因为SGML限制了属性文字的长度。HTML + DTD最多允许1024个字符（SGML默认只有240个字符！）“

啊，这就是为什么文本在元素内部并且不能自动关闭; 他们无法使用长文本属性。1994年，该<textarea>元素与HTML +中的许多其他元素一起被包括在内，例如<option>HTML 2规范中。

好的，这就够了。我可以轻松地进一步探索档案，但回到任务。

造型A. <textarea>

所以我们有一个默认值<textarea>。如果您很少使用它们或者很长时间没有看到浏览器默认设置，那么您可能会感到惊讶。A <textarea>（几乎完全用于多行文本）看起来非常类似于普通文本输入，除了大多数浏览器默认设置样式边框更暗，框稍大，右下角有行。那些线是调整大小的句柄; 它们实际上并不是规范的一部分，所以浏览器都以自己的方式处理（双关语）。这通常意味着调整大小句柄不能重新设置，但您可以通过设置resize: none为禁用调整大小<textarea>。可以创建自定义句柄或使用特定于浏览器的伪元素，例如::-webkit-resizer。

理解默认值很重要，特别是因为调整大小的能力。这是一种非常独特的行为; 默认情况下，用户可以拖动以更改元素的大小。如果你没有覆盖最小和最大尺寸，那么尺寸可以小到9px×9px（当我检查Chrome时）或大到有耐心拖动它。如果没有考虑的话，这可能会导致网站布局的其余部分造成混乱。想象一个网格<textarea>在一列中，一个蓝色框在另一列中; 蓝盒的大小完全取决于它的大小<textarea>。

除此之外，我们可以将样式<textarea>与任何其他输入完全相同。想要将边缘周围的灰色变成浓密的绿色短划线？你肯定在这里：border: 5px dashed green;。想要重点关注许多浏览器有轻微模糊的盒子阴影吗？改变大纲 - 负责任地，但是，这对可访问性很重要。<textarea>如果你感兴趣的话，你甚至可以为你添加一个背景图像（我可以想到一些在更加着名的情感设计时会受欢迎的想法）。

范围蠕变

我们在工作中都经历了范围蔓延，无论客户是不认为最终版本与他们的想法相符，或者您只是尝试进行微小的调整并最终完成它。所以我（喜欢创建一个夸张的项目经理的角色告诉我们我们需要建立什么）已经决定我们的<textarea>公正不够好。是的，它现在是多线的，这很棒，是的它甚至可以用它的新造型“弹出”一点。然而，在我们认为我们差不多完成之后，它只是不符合我现在几乎想到的非常模糊的用户需求。

如果用户输入数千个单词会怎样？或者拖动调整大小手柄到目前为止它打破了布局？正如我们已经提到的那样，它需要是可重用的，但在某些情况下（例如'Twittereqsue'记录框），我们需要一个限制。所以下一个任务是添加一个字符限制。用户需要能够看到他们剩下多少个字符。

以同样的方式，我们开始<input>代替<textarea>，这是很容易想到的是添加maxlength属性将解决我们的问题。这是限制用户输入的字符数量的一种方法，它使用浏览器的内置验证，但无法显示剩余的字符数。

我们从HTML开始，然后添加了CSS，现在是时候使用一些JavaScript了。正如我们所看到的那样，在中国商店中像公牛一样充电而不停下来考虑正确的方法从长远来看确实会减慢我们的速度。特别是在需要更换大型重构的情况下。让我们考虑一下这个柜台; 它需要在用户输入时更新，因此我们需要在用户输入时触发事件。然后需要检查文本量是否已经达到最大长度。

那我们应该选择哪个事件处理程序？

• change
  直觉上，选择变更事件可能是有意义的。它可以在<textarea>锡上运行并完成它所说的。除此之外，它仅在元素失去焦点时触发，因此在键入时不会更新。

• keypress
  键入任何字符时会触发按键事件，这是一个好的开始。但是当删除字符时它不会触发，因此在按退格键后计数器不会更新。复制/粘贴后也不会触发。

• keyup
  这个非常接近，只要按下一个键（包括退格按钮）就会触发它。因此它在删除字符时会触发，但在复制/粘贴后仍然不会触发。

• input
  这是我们想要的。只要添加，删除或粘贴字符，就会触发此操作。

这是另一个很好的例子，说明有时使用我们的直觉是不够的。有很多怪癖（特别是在JavaScript中！）在开始之前都很重要。所以添加一个计数器的代码需要更新一个计数器（我们已经通过一个带有一个被调用类的span来完成counter），方法是向它添加一个input事件处理程序<textarea>。最大字符数在调用的变量中设置maxLength并添加到HTML中，因此如果更改了值，则仅在一个位置更改。

var textEl = document.querySelector('textarea')var counterEl = document.querySelector('.counter')var maxLength = 200textEl.setAttribute('maxlength', maxLength)textEl.addEventListener('input', (val) => {var count = textEl.value.lengthcounterEl.innerHTML = ${count}/${maxLength}})

浏览器兼容性和渐进增强

渐进式增强是一种心态，我们理解我们无法控制用户在屏幕上看到的内容，而是尝试引导浏览器。响应式Web设计就是一个很好的例子，我们构建一个网站，根据特定大小视口的内容进行调整，而无需手动设置每个大小的外观。这意味着，一方面，我们非常关心网站适用于所有浏览器和设备，但另一方面，我们并不关心它们看起来完全相同。

目前，我们错过了一个技巧。我们没有为柜台设置合理的默认值。如果200是最大长度，则默认值为“0/200”; 这种理解但有两个缺点。首先，乍一看它真的没有意义。您需要在键入之前显示0更新之前开始键入。另一个缺点是0键在你键入时更新，这意味着如果JavaScript事件没有正确触发（可能是脚本没有正确下载或者使用旧浏览器不支持的JavaScript，例如上面代码中的双箭头） ）那么它什么都不会做。更好的方法是事先仔细思考。当它既工作又不工作时，我们如何才能使它变得有用？

在这种情况下，我们可以使默认文本为“200个字符限制。”这意味着没有任何JavaScript，用户总是会看到字符限制，但它不会反馈它们与限制的接近程度。但是，当JavaScript工作时，它会在键入时更新，并且可以说“剩余200个字符”。这是一个非常微妙的变化，但意味着虽然两个用户可以获得不同的体验，但也没有获得感觉被破坏的体验。

我们可以设置的另一个默认值是maxlength元素本身而不是之后的JavaScript。如果不这样做，基线版本（没有JS的版本）将能够键入超过限制。

用户测试

它在各种浏览器上进行了很好的测试，并且考虑了设备如何以不同的方式为网站提供服务的各种排列，但用户是否能够使用它？

一般来说，没有。我一直对用户测试感到震惊; 人们从不使用您期望他们的网站。这意味着用户测试至关重要。

在文章中模拟用户测试会话非常困难，因此为了本文的目的，我将只关注我看到用户在各种项目中遇到的一点。

用户很乐意写作，剩下0个字符，然后卡住。他们忘了自己在写什么，或者他们没有注意到它已经停止输入。

发生这种情况是因为没有任何事情告诉用户某些事情发生了变化 如果他们在没有注意的情况下打字，那么他们可以在不注意的情况下达到最大长度。这是一个令人沮丧的经历。

解决此问题的一种方法是允许过度打印，因此最大长度仍然可以计算在提交时有效，但它允许用户输入他们想要的内容，然后在提交之前进行编辑。这是一个很好的解决方案，因为它将控制权交还给用户。

好的，那么我们如何实施过度打样？不要跳入代码，让我们在理论上逐步完成。maxlength不允许过度加工，它只是在达到极限时停止允许输入。所以我们需要删除maxlength并编写一个JS等价物。我们可以像之前一样使用输入事件处理程序，因为我们知道它适用于粘贴等。因此，在该事件中，处理程序将检查用户是否键入了超过限制，如果是，则计数器文本可能会更改说“10个字符太多。”基线版本（没有JS）将不再有限制，因此一个有用的中间地点可能是添加maxlength到HTML中的元素并使用JavaScript删除属性。

这样，用户可以看到他们超过极限而不会在打字时被切断。仍然需要进行验证以确保它没有提交，但是值得花费额外的小工作来使用户体验更好。

设计Overtype

这使我们处于非常稳固的位置：用户现在可以使用任何设备并获得体面的体验。如果他们打字太多，就不会把它们剪掉; 相反，它只会允许它并鼓励他们编辑它。

有多种方式可以设计不同的方式，让我们来看看Twitter如何处理它：

<textarea>自从他们创办公司以来，Twitter一直在重复其主要推文。当前版本使用了许多我们可以考虑使用的技术。

当你在Twitter上输入时，有一个圆圈在你达到280的字符限制时就完成了。有趣的是，它没有说明在距离极限20个字符之前有多少个字符可用。此时，不完整的圆圈变为橙色。一旦剩下0个字符，它就会变为红色。在0个字符后，倒计时变为负数; 它似乎没有限制你可以改写多远（我试过剩下4,000个字符）但是在改写时禁用了推文按钮。

所以这与我们的工作方式相同<textarea>，主要区别在于圆圈表示的字符更新并显示260个字符后剩余的字符数。我们可以通过删除文本并将其替换为SVG圈来实现。

Twitter做的另一件事是在改写后的文本背后添加红色背景。这使得用户完全明显需要编辑或删除一些文本来发布推文。这是设计中非常好的一部分。那么我们如何实现呢？我们将从头开始。

你还记得我们意识到基本输入文本框不会给我们多行的部分吗？那个maxlength属性不会给我们提供改写的能力吗？这是其中一个案例。据我所知，CSS中没有任何内容可以让我们在文本中设置部分文本的样式<textarea>。这是一些人会建议Web组件的点，因为我们需要的是假装<textarea>。我们需要一些元素 - 可能是一个div - contenteditable并且在JS中我们需要将过时的文本包装在用CSS设置样式的范围内。

那么基线非JS版本会是什么样子？好吧，它根本不起作用，因为虽然contenteditable没有JS可以工作，但我们无法用它做任何事情。因此<textarea>，如果JS可用，我们需要默认情况下删除它。我们还需要进行大量的可访问性测试，因为虽然我们可以信任<textarea>依赖于浏览器功能的可访问性比构建自己的组件更安全。Twitter如何处理它？你可能已经看过了; 如果你在火车上并且你的JavaScript在进入隧道时没有加载，那么你就会被淘汰到一个已有十年历史的传统版本的Twitter，其中没有任何字符限制。

如果你在字符限制上发推文，会发生什么？Twitter重新加载页面，并显示错误消息“您的推文超出了字符限制。你必须更聪明。“不，推特。你需要更聪明。

复古

结束这种戏剧化的唯一方法是回顾。什么进展顺利？我们学到了什么？我们下次会做些什么，或者我们会完全改变什么？

我们用一个基本的文本框开始很简单; 在某些方面，这很好，因为从一开始就过于复杂化事情太容易了，MVP方法很好。然而，随着时间的推移，我们意识到有一些批判性思维并考虑我们正在做的事情是多么重要。我们应该知道一个基本的文本框是不够的，并且设置最大长度的方法将是有用的。如果我们过去曾进行或参与用户研究会议，我们甚至可能已经预见到需要允许过度加工。至于跨设备的浏览器兼容性和用户体验，从一开始就考虑逐步增强会抓住大部分潜在问题。

因此，我们可以做出的一个改变是更加主动地思考过程，而不是直接进入任务，认为代码很容易实际代码是最不重要的部分。

与此类似，我们有“范围蔓延” maxlength，虽然我们可能已经预料到了，但我们宁愿没有任何范围蔓延。因此，从一开始就参与的每个人都会非常有用，因为即使是这样的小任务，多种多学科的方法也可以大大减少弄清楚并修复所有意外调整所需的时间。

回到现实世界

好的，所以我可以深入了解这个已经完成的项目，但我认为它很好地证明了看似简单的任务是多么复杂。以用户为中心，具有渐进的增强思维，从一开始就思考，可以对交付的速度和质量产生真正的影响。我甚至没有提到测试！

我详细介绍了使用的历史<textarea>以及使用哪些事件的听众，其中一些似乎有点矫枉过正，但我发现真正了解网络的微妙之处令人着迷，它通常可以帮助揭开问题的神秘面纱。面对未来。

广州网页设计