0
ブラウザ同期には、「テスト中にブラウザ間でスクロール、クリック、リフレッシュ、フォームアクションがミラー化される」という「相互作用同期」という機能があります。 onchangeイベントのために働くようです。ミラー同期したブラウザでbrowser-sync onchangeイベントが発生しない
React component `onChange` event not being triggered when synced with BrowserSyncはReactでは動作しませんが、jsで単純なhtmlでも動作しません。
私たちが使用するフォームの数には、条件に依存するフィールドがあり、このタイプのフォームを完了できません。これを回避する方法はありますか？
以下に、このフォームの簡略化されたバージョンを含めました。これをテストするには：
- 以下のスニペットのコピーを取り、
- が
- は、コマンドプロンプトを開き、HTMLを含むディレクトリに移動し、HTMLファイルとして保存し、htmlファイルに移動し、 （：はlocalhost：ポートHTTP）、URL
- に「/test.html」を追加し、別のブラウザにURLをコピーし、デフォルトのURLを含むブラウザを起動します
- ブラウザ同期を--server開始 ブラウザ同期を実行します
ドロップダウンミラーの選択中に、イベントと関連するJavaScriptが起動しないことがわかります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
.hide{
display:none !important;
}
</style>
</head>
<body>
<form>
<h1>Conditional Form</h1>
<label>dependee</label>
<select name="radioGroup" id="radioGroup" onchange="displayDependent();">
<option value="-1">--</option>
<option value="radio1">radio1</option>
<option value="radio2">radio2</option>
</select>
<div id="text1Group" class="hide">
<label>text1</label>
<input type="text" name="text1">
</div>
<div id="text2Group" class="hide">
<label>text2</label>
<input type="text" name="text2">
</div>
<div id="text3Group">
<label>text3</label>
<input type="text" name="text3">
</div>
</form>
</body>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script>
function displayDependent() {
var dropDownSelect = document.getElementById('radioGroup').value;
// hide both
if (dropDownSelect == "-1") {
$("#text1Group").addClass("hide");
$("#text2Group").addClass("hide");
}
// show 1 hide 2
if (dropDownSelect == "radio1") {
$("#text1Group").removeClass("hide");
$("#text2Group").addClass("hide");
}
// show 2 hide 1
if (dropDownSelect == "radio2") {
$("#text2Group").removeClass("hide");
$("#text1Group").addClass("hide");
}
}
</script>
</html>