在Scala.js中访问textarea值

问题描述

我正试图从Scala.js的一个简单的开始来设置textarea的值。这是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一样简单）。

解决方法

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

您正在使用getElementById方法，该方法返回不具有Element属性的通用value类型，因为DOM中并非所有元素都具有该属性。还有scala-js-dom defines 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。

scala.js

在Scala.js中访问textarea值

问题描述

解决方法

相关问答