[译] 我在阅读 MDN 时发现的 3 个 Input 元素属性
栏目: JavaScript · 发布时间: 5年前
内容简介:我最近在 Twitter 偶然发现了Dan Abramov 的推文。他分享的一段简短的代码引起了我注意的。这段代码使用 JavaScript 访问 DOM(我立即打开 MDN 阅读更多关于那么我们开始吧!
我最近在 Twitter 偶然发现了Dan Abramov 的推文。他分享的一段简短的代码引起了我注意的。这段代码使用 JavaScript 访问 DOM( Document Object Model )中的 input 元素,并读取或更改了它的一些属性,其中令我惊叹的是 defaultValue
属性。
我立即打开 MDN 阅读更多关于 HTTMLInputElement
的 defaultValue
属性,并偶然发现了一些我不知道的属性,这便是我写这篇短文的原因。
那么我们开始吧!
defaultValue
这是 Dan 推文中的示例 — HTML 代码中有一个 input 元素,该元素具有 value
属性(attribute)(attribute 在 HTML 代码中定义,而 property 属于 JavaScript 对象)。
<input type="text" value="Hello world"> 复制代码
现在可以查找到这个元素并做一些处理。
const input = document.querySelector('input'); console.log(input.value); // 'Hello world' input.value = 'New value'; console.log(input.value); // 'New value' console.log(input.defaultValue); // 'Hello world' 复制代码
如你所见,属性 value
中定义的值最初反映在元素属性 value
中,这没什么特别,但当你改变 value
时,仍然可以使用 defaultValue
访问“初始值”( defaultChecked
在复选框也可用),这就很酷了!
defaultValue
在MDN 的定义如下:
[它]返回 / 设置在创建此对象的 HTML 中最初指定的默认值。
你可以在CodePen 测试这段代码。
indeterminate
indeterminate
属性是一个迷人的属性。你可曾知道复选框具有已选和未选之外的其他可视状态? indeterminate
是一个 property(没有对应的 attribute),你有时候可能会看到带着一个小破折号的复选框,使用这个属性便能做到。
const input = document.querySelector('input'); input.indeterminate = true; 复制代码
将 indeterminate
设置为 true
对复选框的值没有任何影响,我想到的唯一应用场景是 Chris Coyier 在 CSSTricks 提到的 嵌套复选框。
indeterminate
不仅适用于复选框,还可以用于单选按钮和进度元素。假设有一组单选按钮,没有一个按钮被选择。在你未作出选择前,它们都没有被选中同时也都没有不被选中,这时它们就处于 indeterminate
状态。
还有一种玩法,你可以对被选定元素使用 CSS 伪类 :indeterminate
,这样可以在单选按钮组未被选择时方便展示一些特殊的 UI 组件。
.msg { display: none; } input:indeterminate ~ .msg { display: block; } 复制代码
有关 indeterminate
属性的有趣之处在于你可以将它设置为 true
或 false
,这将影响复选框的伪类,但不会影响单选按钮。 对于单选按钮,按钮组的实际选择状态始终是正确的 。
顺道提一下,progress 元素 在未定义 value
属性时也将匹配 :indeterminate
选择器。
indeterminate
在MDN 的定义如下:
[它]表示复选框或单选按钮没有值且处于不确定的状态。复选框的外观会变成第三个状态,但这不影响 checked 属性的值,单击复选框会将值设置为 false。
你可以在CodePen 测试这段代码。
selectionStart
、 selectionEnd
和 selectionDirection
这三个属性可以确定用户选择的内容,并且使用起来非常简单。如果用户在输入字段中选择文本,则可以使用这三个属性计算所选内容。
const input = document.querySelector('input'); setInterval( _ => { console.log( input.selectionStart, input.selectionEnd, input.selectionDirection; ); // e.g. 2, 5, "forward" }, 1000) 复制代码
这段测试代码的作用是每秒记录一次选择值。 selectionStart
和 selectionEnd
返回描述我选择位置的索引,但是当你使用鼠标或触控板选择时 selectionDirection
返回的是 none
,而使用 SHIFT 和箭头选择文本时会返回 forward
或 backward
。
你可以在CodePen 测试这段代码。
以上是这次分享的全部内容。 :)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- WPF 元素裁剪 Clip 属性
- PHP的SimpleXML遍历所有子元素及访问特定节点元素和属性
- 为什么React元素有一个$$typeof属性?
- jscript与vbscript 操作XML元素属性的代码
- WPF 中使用附加属性,将任意 UI 元素或控件裁剪成圆形(椭圆)
- javascript – 如何使用jquery查找包含与前缀匹配的data- *属性的元素
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Building Social Web Applications
Gavin Bell / O'Reilly Media / 2009-10-1 / USD 34.99
Building a social web application that attracts and retains regular visitors, and gets them to interact, isn't easy to do. This book walks you through the tough questions you'll face if you're to crea......一起来看看 《Building Social Web Applications》 这本书的介绍吧!