我正在制作一個筆記應用程式，我想要 2 個文本區域，當您輸入一個時，另一個文本區域會更改您正在執行的操作。我希望當我更改頁面標題時，頁面上的其他位置也會更改。我將提供我當前的代碼，我的頁面是什么樣的（我希望更改與我的 Unititled 和下拉箭頭旁邊的區域一起進行）以及我想要它做什么，我已經嘗試過更改和輸入事件，我可以' 似乎沒有弄明白。[我當前的站點][1]
我想要的 - https://share.vidyard.com/watch/Wj6uTmEiB9LR8iiZy7sVf9 [1]: https://i.stack.imgur.com/3vzEB.png
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Study App</title>
<link rel="stylesheet" href="study.css" />
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-
8"></script>
</head>
<body>
<script src="study.js"></script>
<div class="dropdown">
<nav><label for="touch"><span>Settings</span></label>
<input type="checkbox" id="touch"/>
<ul class="slide">
<li><a><div class="dark"><button onclick="myFunction()">
<input class="toggle" type="checkbox" /></button></div></a></li>
<li><a href="#"></a></li>
</ul>
</nav>
</div>
</div>
<div class="arrowdown">
<input type="checkbox" id="myCheckbox" onchange="rotateElem()" checked><i class="fas fa-angle-
right dropdown"></i></button>
<div class="pages">
<a href="#" class="sub-item">Add Page</a></div>
</div>
</div>
<script type="text/javascript">
var checkBox = document.getElementById("myCheckbox");
function rotateElem() {
if (checkBox.checked == false)
{
document.querySelector('.fas.fa-angle-right.dropdown').style.transform = 'rotate(90deg)';
}
else {
document.querySelector('.fas.fa-angle-right.dropdown').style.transform= 'rotate(0deg)';
}
}
</script>
<div class="tabs"></div>
<div class="sidebar">
<div class="sidebar-top">
<h1><span class="study">Study</span><span class="app">App</span></h1>
</div>
<div class="title">
<textarea id="shortInput" spellcheck="true" placeholder="Untitled" cols="30" rows="1">
</textarea>
</div>
<div class="textbox">
<textarea id="longInput" spellcheck="true" placeholder="Start typing..." cols="30"
rows="10"></textarea>
</div>
<script type="text/javascript">
$('.pages').hide();
$(document).ready(function(){
$('input').click(function(){
$('.pages').slideToggle();
});
});
</script>
<script src="study.js"></script>
</body>
</html>
uj5u.com熱心網友回復：
一種可能的方法是將同步值存盤在變數中，并為每個元素添加事件偵聽器以進行任何更改。然后在發生更改時用新值更新每個元素的值。
// Store the synchronised content
let value = ''
// Add change listeners to each element
const elements = document.querySelectorAll('.synced')
for (let i = 0; i < elements.length; i ) {
// Different browsers will work better with different events
// but there's no problem with listening for multiple
elements[i].addEventListener('change', handleChange)
elements[i].addEventListener('input', handleChange)
elements[i].addEventListener('keyup', handleChange)
}
// When a change occurs, set the value of all the synchronised elements
function handleChange(e) {
value = e.target.value
for (let i = 0; i < elements.length; i ) {
elements[i].value = value
}
}<textarea class="synced"></textarea>
<textarea class="synced"></textarea>
<textarea class="synced"></textarea>jQuery 版本：
// Store the synchronised content
let value = ''
// Get all the of the relevant elements
const elements = $('.synced')
// Different browsers will work better with different events
// but there's no problem with listening for multiple
elements.on('change input keyup', function() {
value = $(this).val()
elements.val(value)
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="synced"></textarea>
<textarea class="synced"></textarea>
<textarea class="synced"></textarea>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/378792.html
標籤：javascript html css