我正在 Typescript 中创建一个 HTMLInputElement,我打算通过将输入元素的type字段设置为 来将其用作“滑块” "range"。
根据 MDN Web Docs,我可以通过创建 HTMLDatalistElement 的实例、为数据列表提供并通过滑块的字段id引用数据列表来使该滑块更加精美。这不仅会给我的滑块一些刻度线来表示滑块光标当前所在的位置,而且我还可以设置数据列表的 HTMLOptionElement字段来引入带标签的刻度线。idlistlabel
来源: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;
Run Code Online (Sandbox Code Playgroud)
谷歌浏览器抱怨这个错误:
Uncaught TypeError: Cannot set property list of #<HTMLInputElement> which has only a getter
Run Code Online (Sandbox Code Playgroud)
由于 MDN Web 文档清楚地表明该字段是要使用的,因此我尝试通过以下方式忽略 Deno/TS-Node 错误来消除它:
// @ts-ignore
Run Code Online (Sandbox Code Playgroud)
该解决方案不起作用,并导致上述 Google Chrome 运行时错误。
我不明白为什么在通过文件构造 HTMLInputElement 时允许设置此字段.html,但在通过 Javascript/Typescript 动态创建 HTMLInputElement 实例时不允许使用它。能够动态设置滑块的刻度线标签会非常好。