Var 변경시 내 입력 HTML 양식에 포커스/비우기가 발생합니다.

Question

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에서 실행됩니다.

그러나 텍스트 상자에 내용을 입력하면 텍스트 상자에 포커스가 누락되어 계속 비어있게됩니다.

어떻게 해결할 수 있습니까?

Answer 1

동일한 @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에서 실행됩니다.

---

다른 접근법은 @dom val에 .bind 식 배치되어

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.