首页 >web前端 >css教程 >EnterKeyHint

EnterKeyHint

Christopher Nolan
Christopher Nolan原创
2025-03-18 11:43:21133浏览

EnterKeyHint

我只是最近才知道表单输入上的EnterKeyHint属性是一回事!对我来说,这似乎是一件大事,因为制作HTML形式标记是前端开发人员一生中的一个不错的切片,并且几乎每个输入都可以使用此属性(应该? )。

EnterKeyHint属性更改移动键盘上的操作键,以更改文本/负担。 Stefan Judis在2020年的推文中很好地说明了它:

所以,说我有这样的形式:

 
  <label>
    姓名:
    <input type="“" text name="“">
  </label>
  <label>
    最喜欢的歌曲:
    <textarea name="“歌曲”"> </textarea>
  </label>
  保存

那里的用户体验建议表格“保存”,但默认情况下,我手中的iPhone上,键盘中的蓝色按钮说……“去。”

那不是灾难之类的东西,但是现在我有一些选择该按钮的选择。我将从规格中窃取它,该规范称它们为“输入方式”:

作为一个认真的网络专业人员,我还尝试了EnterKeykint =“ Poop”,但是,可惜的是,浏览器并没有尊重它。请注意,在Android上,操作按钮不仅总是变成文本,而且使用图标。因此,为了发送值,您将获得一个小纸飞机图标,而不是“发送”标签。所以,是的,很明显,便便应该变成?

对于上面的小表格示例…以某种方式输入或完成的值对我来说比走得更好。如果我想更改它,我会为所有交互式元素添加属性:

 
  <label>
    姓名:
    <input type="“" text name="“" enterkeyhint="“" douth>
  </label>
  <label>
    最喜欢的歌曲:
    <textarea name="“歌曲”" enterkeyhint="“" done> </textarea>
  </label>
  <button enterkeyhint="“" done>保存</button>

此属性直接在表单输入上,因此对于每个输入,尤其是更长的表单,都会有点重复编写它。但这确实使您有机会根据专注于哪些输入来更改它。

我注意到保存不是一个有效的选项。这似乎很奇怪,因为感觉很多形式都会提供。也许Web平台不想提供告诉用户无法执行的东西的东西?不过,我不确定是这样,因为如果您放置下一个或上一个根本不会改变行为的情况,那么如果您想做的是将重点放在下一个或以前的输入中,则必须自己编码。默认情况下,操作按钮只是按照往常的方式提交表单。

我遇到了所有这些,因为Stefan最近在推特上说Firefox现在正在支持它,并为此功能提供了一套完整的支持。此功能仅与移动浏览器有关(或者我想是支持虚拟键盘的浏览器?),因此我想到了Firefox移动设备的存在。我已经习惯了这样一个事实,所有浏览器都是iOS上的野生动物园(?)。但是在Android上,您可以使用“真实的” Firefox,这很好地提醒您,不仅存在不同的移动浏览器,而且不同的移动浏览器也具有不同的行为。

在此视频中,我敢肯定,该视频比EnterKeyHint的支持更重要,请注意虚拟键盘在专注于第一个输入(并且无法直接提交)时如何自动为Next提供UI,但在第二个输入(最后)(最后)操作中,该按钮将变成提交按钮(并且没有“上一个”按钮)。这与iOS明显不同,iOS所提供的所有内容都是在键盘本身上方几乎没有上下箭头的输入之间导航。

总而言之,我们至少应该意识到的一个非常酷的功能,如果在大多数HTML表单上都不使用以匹配行为。

以上是EnterKeyHint的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn