This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
いくつかの HTML タグをテキストエリアに挿入します。
function insert(startTag, endTag) {
const textArea = document.myForm.myTextArea;
const start = textArea.selectionStart;
const end = textArea.selectionEnd;
const oldText = textArea.value;
const prefix = oldText.substring(0, start);
const inserted = startTag + oldText.substring(start, end) + endTag;
const suffix = oldText.substring(end);
textArea.value = `${prefix}${inserted}${suffix}`;
const newStart = start + startTag.length;
const newEnd = end + startTag.length;
textArea.setSelectionRange(newStart, newEnd);
textArea.focus();
}
function insertURL() {
const newURL = prompt("リンクの完全な URL を入力してください。");
if (newURL) {
insert(``, "");
} else {
document.myForm.myTextArea.focus();
}
}
const strong = document.querySelector("#format-strong");
const em = document.querySelector("#format-em");
const link = document.querySelector("#format-link");
const code = document.querySelector("#format-code");
strong.addEventListener("click", (e) => insert("", ""));
em.addEventListener("click", (e) => insert("", ""));
link.addEventListener("click", (e) => insertURL());
code.addEventListener("click", (e) => insert("", ""));
内部の span をリンクのように動作させるよう装飾する CSS です。
.intLink {
cursor: pointer;
text-decoration: underline;
color: #0000ff;
}
| Specification |
|---|
| HTML # htmltextareaelement |