访问 Scala.js 中的文本区域值

Question

我正在尝试将文本区域的值设置为 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那么简单）。

Answer 1

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

您正在以同样的方式使用 getElementById method which returns a generic Element type that does not have a value property because not all elements in the DOM have such a property. And scala-js-dom defines getElementById。

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

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

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

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

的实例

如果你的 DOM 是在服务器上生成的，这可能是你能做的最好的，但是如果你正在构建一个单页网络应用程序，其中 DOM 树是在客户端上创建的你可以使用一个 Scala.js UI 库，它会给你一个更好、更简单、类型安全的 API 到 DOM，比如我自己的 Laminar。

访问 Scala.js 中的文本区域值

Accessing textarea value in Scala.js

scala.js