WebKit之HTMLInputElement介绍

1)HTMLInputElement

   a,继承关系。

   ->EventTarget、ScriptWrappable

    ->Node

      ->ContainerNode

        ->Element

          ->StyledElement

            ->HTMLElement、FormAssociatedElement

              ->HTMLFormControlElement

                ->HTMLFormControlElementWithState

                  ->HTMLTextFormControlElement、InputElement

                    ->HTMLInputElement

    

    b,功能分布

    #继承自InputElement(基类):提供判断<input>的类型、常见的属性获取(size、value)

    >>转换API:toInputElement()->InputElement

    #类型、状态的判断API:

    >>setType()

    >>isRadioButton()、isTextFiled()、isCheckBox()、isText()...

    >>checked()、setChecked()、indeterminate()、setIndeterminate()

    >>private中isIndeterminate():用于JS的调用判断状态。

    #用于数值微调API(小三角)

    >>stepUp()、stepDown()、isSteppable()

    >>stepUpFromRenderer():UI层调用

    #内容API

    >>setValue()、value()、isValidValue

    >>setValueFromRenderer()

### HTMLInputElement 使用方法及属性介绍 HTMLInputElement 是用于表示 `<input>` 元素的对象,在网页开发中非常常见。此类元素允许用户输入数据并提交给服务器处理。 #### 属性说明 对于 DOM 节点对象 `ipt`,其 properties 表示该对象的所有 JavaScript 可访问属性集合,而 attributes 则是此对象中的一个特殊属性,包含了所有声明在 HTML 中的特性[^1]。具体到 HTMLInputElement 的一些常用属性如下: - **value**: 获取或设置 input 控件当前值。 - **type**: 返回 input 元素的数据类型(例如 text, password, checkbox 等)。 - **name**: 设置或返回 input 元素名称。 - **checked**: 当 type 为 radio 或 checkbox 时有效;获取或设定是否选中状态。 - **disabled**: 如果存在,则禁用 input 输入框。 - **readOnly**: 若设定了 readOnly 属性,则无法编辑字段内容。 - **placeholder**: 提供提示信息直到用户开始键入为止。 - **required**: 规定必须填写该项才能继续操作。 - **className**: 定义 CSS 类名以便样式化特定表单控件。 #### 方法实例展示 下面是一个简单的例子来演示如何创建和操作 HTMLInputElement 实例: ```html <!-- 创建一个文本类型的 Input --> <input id="myInput" type="text"> <script> // 获取指定 ID 的 input 元素 const ipt = document.getElementById('myInput'); // 修改 value 值 ipt.value = 'Hello World'; // 添加事件监听器 ipt.addEventListener('change', function(event){ console.log(`新值: ${event.target.value}`); }); </script> ``` 此外还可以通过 JavaScript 动态改变其他属性如 disabled、readonly 和 placeholder 等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值