当 Var 更改时,我的输入 html 表单丢失 focus/empties
My input html forms misses focus/empties when a Var changes
我想从 Binding.scala 中创建一些 UI。 UI 包含一个文本框。当用户在文本框中键入文本时,我想根据用户输入更改背景颜色。
import com.thoughtworks.binding._, Binding._
import org.scalajs.dom._
@dom def render = {
val color = Var("")
val styleText: String = s"background-color: ${color.bind}"
// <div> and <input> will be recreated once data changes.
<div style={styleText}>
<input id="myInput" type="text" oninput={ _: Any => color := myInput.value }/>
</div>
}
dom.render(document.body, render)
该示例在 ScalaFiddle.
上运行
但是,当我在文本框中输入内容时,文本框失去焦点并且仍然是空的。
我该如何解决?
也许您在同一个 @dom
方法中定义了 <input ...>
和 .bind
,而 <input ...>
在 .bind
之后。尝试将 .bind
和 <input ...>
重构为单独的 @dom
方法或让 .bind
表达式嵌套在另一个 DOM.
中
比如myInput
写在.bind
之前,就不会重新创建:
import com.thoughtworks.binding._, Binding._
import org.scalajs.dom._
@dom def render = {
val color = Var("")
val myInput = <input id="myInput" type="text" oninput={ _: Any => color := myInput.value }/>
val styleText: String = s"background-color: ${color.bind}"
// <div> will be recreated once data changes.
// <input> will not be recreated.
<div style={styleText}>
{myInput}
</div>
}
dom.render(document.body, render)
以上示例在 ScalaFiddle.
上运行
如果 .bind
表达式嵌入到 XHTML 文字中,则不会影响其子项:
import com.thoughtworks.binding._, Binding._
import org.scalajs.dom._
@dom def render = {
val color = Var("")
// <div> and <input> will not be recreated when data changes.
// Only the class attribute will be changed.
<div style={s"background-color: ${color.bind}"}>
<input id="myInput" type="text" oninput={ _: Any => color := myInput.value }/>
</div>
}
dom.render(document.body, render)
以上示例在 ScalaFiddle.
上运行
另一种方法是将 .bind
表达式包装在 @dom val
:
中
import com.thoughtworks.binding._, Binding._
import org.scalajs.dom._
@dom def render = {
val color = Var("")
@dom val styleText: Binding[String] = s"background-color: ${color.bind}"
// <div> and <input> will not be recreated when data changes.
// Only the class attribute will be changed.
<div style={styleText.bind}>
<input id="myInput" type="text" oninput={ _: Any => color := myInput.value }/>
</div>
}
dom.render(document.body, render)
以上示例在 ScalaFiddle.
上运行
我想从 Binding.scala 中创建一些 UI。 UI 包含一个文本框。当用户在文本框中键入文本时,我想根据用户输入更改背景颜色。
import com.thoughtworks.binding._, Binding._
import org.scalajs.dom._
@dom def render = {
val color = Var("")
val styleText: String = s"background-color: ${color.bind}"
// <div> and <input> will be recreated once data changes.
<div style={styleText}>
<input id="myInput" type="text" oninput={ _: Any => color := myInput.value }/>
</div>
}
dom.render(document.body, render)
该示例在 ScalaFiddle.
上运行但是,当我在文本框中输入内容时,文本框失去焦点并且仍然是空的。
我该如何解决?
也许您在同一个 @dom
方法中定义了 <input ...>
和 .bind
,而 <input ...>
在 .bind
之后。尝试将 .bind
和 <input ...>
重构为单独的 @dom
方法或让 .bind
表达式嵌套在另一个 DOM.
比如myInput
写在.bind
之前,就不会重新创建:
import com.thoughtworks.binding._, Binding._
import org.scalajs.dom._
@dom def render = {
val color = Var("")
val myInput = <input id="myInput" type="text" oninput={ _: Any => color := myInput.value }/>
val styleText: String = s"background-color: ${color.bind}"
// <div> will be recreated once data changes.
// <input> will not be recreated.
<div style={styleText}>
{myInput}
</div>
}
dom.render(document.body, render)
以上示例在 ScalaFiddle.
上运行如果 .bind
表达式嵌入到 XHTML 文字中,则不会影响其子项:
import com.thoughtworks.binding._, Binding._
import org.scalajs.dom._
@dom def render = {
val color = Var("")
// <div> and <input> will not be recreated when data changes.
// Only the class attribute will be changed.
<div style={s"background-color: ${color.bind}"}>
<input id="myInput" type="text" oninput={ _: Any => color := myInput.value }/>
</div>
}
dom.render(document.body, render)
以上示例在 ScalaFiddle.
上运行另一种方法是将 .bind
表达式包装在 @dom val
:
import com.thoughtworks.binding._, Binding._
import org.scalajs.dom._
@dom def render = {
val color = Var("")
@dom val styleText: Binding[String] = s"background-color: ${color.bind}"
// <div> and <input> will not be recreated when data changes.
// Only the class attribute will be changed.
<div style={styleText.bind}>
<input id="myInput" type="text" oninput={ _: Any => color := myInput.value }/>
</div>
}
dom.render(document.body, render)
以上示例在 ScalaFiddle.
上运行