跟踪scala js中文本框的变化

Question

我的 html 文件中有一个文本框，我想检测用户何时更改它的值并确定其更新后的值。 html 文本框的代码是：

<input type="text" name="amount" id="amount" value="0" onchange="Demo().change(id,value)">

在我的 scala 文件中，我实现了一个函数 'change' 作为 :

@JSExport
def change(id:String):Unit={
appendPar(document.body,"Text Box value is changed and the new value is : "+document.getElementById(id).getAttribute("value"))
}

但这对我来说不起作用。我在这里做错了什么？有什么建议吗？

更新：仅当我在更改文本框中的值后按回车键时才会触发事件。此外，它将更新值显示为“0”。我怎样才能让它从文本框中获取而不是我的预定义值？

Answer 1

您需要使用其中一种 onkey 处理程序。例如：

请注意 IIRC，如果用户使用箭头键四处移动，这也会触发。所以如果你真的想只在它改变时被调用，你需要引入一个变量并检查：

var lastValue: String = ""

@JSExport
def change(id:String): Unit = {
  val newValue = document.getElementById(id).getAttribute("value")
  if (lastValue != newValue) {
    appendPar(document.body,
      "Text Box value is changed and the new value is : " + newValue)
    lastValue = newValue
  }
}

Answer 2

如果可以忽略 IE<=9，则可以使用 input 事件代替 change。

The DOM input event is fired synchronously when the value of an or element is changed

来自 MDN.

请注意，对于 non-text/textarea 输入（例如复选框、单选按钮等），还有其他浏览器兼容性警告，但您可以只对这些使用 change 事件。有关详细信息，请参阅 http://caniuse.com/#search=input。

我也没有在您的代码中看到变量 id 的来源。如果这是您想要的，您应该传递字符串 "amount" 而不是 id，如下所示：Demo().change("amount")。那将是非常不可重用的，但它至少应该可以工作。

如果您希望该方法更通用，请注意 javascript 将 Event 对象传递给所有事件处理程序，并且它有一个包含 HTML 元素的 target 键事件发生的地方（在本例中就是您的文本区域）。您可以轻松获得 target.

的 value

如果这让你感到困惑，我建议你先尝试在 JS 中实现它，然后再将其翻译成 Scala。你不想同时在两条战线上战斗。

跟踪scala js中文本框的变化

Tracking changes in textbox in scala js

scala.js