晚安Stackoverflow! 所以我遇到了一个问题,我正在尝试使用javascript创建一个笔记应用程序,我想玩localStorage。我尝试了几个选项,但我似乎无法选择所有选项,然后将localStorage复制到剪贴板,还有其他人在此之前运行吗?
<!DOCTYPE html>
<html>
<head>
<title>NotePad</title>
<style>
body {
font-family: Tahoma;
line-height: 1.6em;
background: #f4f4f4;
}
header, footer {
text-align: center;
}
#container {
width: 400px;
margin: 50px auto;
background: #FFFFa5;
overflow:hidden;
padding: 30px;
}
.clear {
text-decoration: none;
background: #333;
color: #fff;
padding: 10px;
}
.copy {
text-decoration: none;
background: #333;
color: #fff;
padding: 10px;
}
</style>
<script>
function getNote(){
if(localStorage.getItem('note')){
var note = localStorage.getItem('note');
} else {
var note = 'Go ahead and edit this note to save in local storage';
}
document.getElementById('note').innerHTML = note;
}
function saveNote(id){
var note = document.getElementById('note').innerHTML;
localStorage.setItem('note', note);
}
function clearNote(){
clear: localStorage.clear();
return false;
}
function copyNote(){
$("#note").select();
document.execCommand("copy");
return false;
}
</script>
</head>
<body>
<header>
<h1>My Notes!</h1>
</header>
<section id="container">
<div id="note" contenteditable="true" onkeyup='saveNote(this.id)'></div>
</section>
<footer>
<div>
<a href="" onclick="javascript:clearNote();" class="clear">Clear Note</a>
</div>
<br>
<div>
<a href="" onclick="javascript:copyNote()" class="copy">Copy</a>
</div>
<p>MyNote © 2017</p>
</footer>
<script>
getNote();
</script>
</body>
</html>
答案 0 :(得分:0)
select方法不选择文本。它触发该元素上的select事件(假装用户自己选择了该元素),并且因为select元素没有事件处理程序,所以没有任何反应。 This question应该可以帮助您创建一个选择文本的函数。