我在TypeScrip中创建一个HTMLInputElement,通过将输入元素的type字段设置为"range",我打算将其用作"滑块".

根据MDN Web Docs的说法,我可以通过创建HTMLDatalistElement的一个实例,为DataList赋予id,并通过滑块的list字段引用DataList的id,来使这个滑块更受欢迎.这不仅会给我的滑块提供一些刻度标记来指示滑块光标当前所在的位置,而且我还可以设置DataList的HTMLOptionElement的label字段来引入带标签的刻度标记.

来源:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#adding_labels

但是,Deno/TS-Node报告以下错误:

error: TS2540 [ERROR]: Cannot assign to 'list' because it is a read-only property.
      inputElement.list = datalistId;

而谷歌Chrome则抱怨出现了这样的错误:

Uncaught TypeError: Cannot set property list of #<HTMLInputElement> which has only a getter

由于MDN Web文档清楚地显示应使用此字段,因此我try 通过以下方式忽略Deno/TS-Node错误,以使其静默:

// @ts-ignore

此解决方案不起作用,并导致上面的Google Chrome运行时错误.

我不明白为什么在通过.html文件构造HTMLInputElement时允许设置此字段,但在通过Java脚本/类型脚本动态创建HTMLInputElement的实例时却不允许使用它.能够动态设置滑块的刻度线标签将是非常好的.

推荐答案

根据HTML specification,list content attribute实际上被指定为包含对应datalist元素的ID:

The list attribute is used to identify an element that lists predefined options suggested to the user.
If present, its value must be the ID of a datalist element in the same tree.

但是,input元素的list IDL属性(在DOM接口中指定)是只读的,并且返回实际的HTMLDataListElement而不是其ID:

interface HTMLInputElement : HTMLElement {
  // ...
  readonly attribute HTMLDataListElement? list;
  // ...
}

但是,您可以使用setAttribute()函数操作list content属性,并以这种方式设置input元素的datalist ID:

document.querySelector('#input').setAttribute('list', 'values');
<input id="input" type="range">
<datalist id="values">
  <option value="0" label="0"></option>
  <option value="50" label="50"></option>
  <option value="100" label="100"></option>
</datalist>

Javascript相关问答推荐

如何使图像逐渐/平稳地响应(先减少宽度,然后减少高度)

如何从JavaScript中的公共方法调用私有方法?

为什么有些库公开了执行相同任务的方法,但每个方法都处于同步/同步上下文中?

如何指定1条记录1个表?

如何在加载的元数据上使用juserc和await中获得同步负载?

如何通过onClick为一组按钮分配功能;

将数据从strapi提取到next.js,但响应延迟API URL

是否有方法在OpenWeatherMap API中获取过go 的降水数据?

使用JavaScript在ionic Web应用程序中更新.pane和.view的背景 colored颜色

if/else JavaScript中的条件行为

格式值未保存在redux持久切片中

无法在nextjs应用程序中通过id从mongoDB删除'

使用JavaScript重新排序行

如何在Javascript中的控制台上以一行形式打印循环的结果

在vercel throws上部署带有gunjs的sveltekit应用无法找到模块./' lib/文本编码'

Rehype将hashtag呈现为URL

当运行d3示例代码时,没有显示任何内容

在Three JS中看不到补间不透明度更改效果

无法避免UV:flat的插值:非法使用保留字"

将范围 Select 器添加到HighChart面积图