时间戳

首页 > 解决方案 > 在 Scala.js 中访问 textarea 值

scala.js - 在 Scala.js 中访问 textarea 值

问题描述

我正在尝试将 textarea 的值设置为 Scala.js 的简单开始。这是html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>The Scala.js Tutorial</title>
  </head>
  <body>
    <div id="content"></div>
    <textarea id="text" cols="75" rows="12">letters</textarea>
    <script type="text/javascript" src="./target/scala-2.13/scala-js-tutorial-fastopt.js"></script>
  </body>
</html>

这是我的 Scala 程序：

package learn.creation
import org.scalajs.dom
import org.scalajs.dom.document

object LearnApp {
    def main(args: Array[String]): Unit = {
        println(document.getElementById("text").value)
    }
}

当我编译时，我得到

value value is not a member of org.scalajs.dom.raw.Element
[error] did you mean valueOf?
[error]         println(document.getElementById("text").value)
[error]                                                 ^

这也不起作用：

println(document.getElementById("text").valueOf().value)

我找不到这方面的任何文档（Scala.js 的 dom 文档非常有限，它不像 rtfm 那样简单）。

标签： scala.js

解决方案

关于 DOM 的手册主要是 MDN web 文档，scala-js-dom 只是一个非常薄的接口，几乎所有的方法都是相同的并返回相同的类型。

您正在使用getElementByIdElement方法，该方法返回没有属性的泛型类型，value因为并非 DOM 中的所有元素都具有这样的属性。并且 scala-js-dom以同样的方式定义 getElementById。

所以本质上，你没有向编译器证明你选择的元素是一种具有 value 属性的元素，例如HTMLInputElement或HTMLTextAreaElement。当使用 Javascript 的本地方法查询 DOM 时，您通常无法证明这些事情，因为它们是为动态 Javascript 设计的，而不是为类型安全访问而设计的。

您可以为此构建自己的助手，例如：

def getTextareaById(id: String): HTMLTextAreaElement = {
  document.querySelector("textarea#" + id).asInstanceOf[HTMLTextAreaElement]
}

在这种情况下，您asInstanceOf用来告诉编译器“我知道我在做什么”，这是不安全的，但您也可以将这种不安全包含在一个您可以合理理解为安全的小方法中，因为它只选择带有标签“textarea”，你知道所有这些都是HTMLTextAreaElement.

如果您的 DOM 是在服务器上生成的，这可能是您能做的最好的事情，但是如果您正在构建一个在客户端上创建 DOM 树的单页 Web 应用程序，您可以使用一个 Scala.js UI 库来为您提供一个更好、更简单、类型安全的 DOM API，比如我自己的Laminar。

推荐阅读