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

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

当更改或元素的值时，会同步触发DOM输入事件

来自MDN。

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

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

如果您希望该方法更通用，请注意javascript将Event对象传递给所有事件处理程序，并且它有一个target键，其中包含事件发生的HTML元素（在本例中为将是你的textarea）。然后，您可以轻松获得value的{{1}}。

如果这令人困惑，我建议你先尝试在JS中实现它，然后将其转换为Scala。你不想同时在这两个战线上作战。

Answer 2

您需要使用其中一个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
  }
}

跟踪scala js中文本框中的更改

2 个答案: