keijiban-test1
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>掲示板</title>
<style>
textarea {
width: 100%;
height: 100px;
}
button {
margin-top: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1>掲示板</h1>
<form id="bbsForm">
<textarea id="message" placeholder="メッセージを入力してください"></textarea><br>
<button type="button" onclick="decorateText('[b]', '[/b]')">太字</button>
<button type="button" onclick="decorateText('[i]', '[/i]')">斜体</button>
<button type="button" onclick="decorateText('[color=red]', '[/color]')">赤文字</button>
<button type="button" onclick="copyText()">コピー</button>
<button type="button" onclick="clearText()">クリア</button>
<button type="submit">送信</button>
</form>
<script>
function decorateText(prefix, suffix) {
const textarea = document.getElementById("message");
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const selected = textarea.value.substring(start, end);
const newText = prefix + selected + suffix;
textarea.setRangeText(newText, start, end, 'end');
textarea.focus();
}
function copyText() {
const textarea = document.getElementById("message");
textarea.select();
document.execCommand("copy");
alert("コピーしました");
}
function clearText() {
document.getElementById("message").value = "";
}
</script>
</body>
</html>
使用変数
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>掲示板</title>
<style>
textarea {
width: 100%;
height: 100px;
}
button {
margin-top: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1>掲示板</h1>
<form id="bbsForm">
<textarea id="message" placeholder="メッセージを入力してください"></textarea><br>
<button type="button" onclick="decorateText('[b]', '[/b]')">太字</button>
<button type="button" onclick="decorateText('[i]', '[/i]')">斜体</button>
<button type="button" onclick="decorateText('[color=red]', '[/color]')">赤文字</button>
<button type="button" onclick="copyText()">コピー</button>
<button type="button" onclick="clearText()">クリア</button>
<button type="submit">送信</button>
</form>
<script>
function decorateText(prefix, suffix) {
const textarea = document.getElementById("message");
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const selected = textarea.value.substring(start, end);
const newText = prefix + selected + suffix;
textarea.setRangeText(newText, start, end, 'end');
textarea.focus();
}
function copyText() {
const textarea = document.getElementById("message");
textarea.select();
document.execCommand("copy");
alert("コピーしました");
}
function clearText() {
document.getElementById("message").value = "";
}
</script>
</body>
</html>
使用変数
| charset | |
| clearText -------( Function ) | |
| color | |
| copyText -------( Function ) | |
| decorateText -------( Function ) | |
| end | |
| id | |
| lang | |
| newText | |
| onclick | |
| placeholder | |
| selected | |
| start | |
| textarea | |
| type | |
| value |