execCommand添加超链接失效及替代方案技术咨询

1. 超链接无法添加到输入框文本的原因及解决方法 #

普通<input type="text">是纯文本输入控件，不支持富文本编辑操作，document.execCommand()仅对开启富文本编辑模式的元素（如设置contenteditable="true"的元素）生效。

修改方案 #

将原<input>替换为带contenteditable="true"的<div>，并调整样式适配：

修改后的HTML片段

<form action="#">
    <div contenteditable="true" id="input" placeholder="Chat comes here..."></div>
</form>

补充CSS样式（实现placeholder效果）

#input:empty:before {
    content: attr(placeholder);
    color: #757575;
}

此时原JavaScript中的execCommand('createLink')即可生效，但更推荐使用下文的替代方案。

2. execCommand()的替代方案 #

document.execCommand()已被废弃，推荐使用Selection API和Range API手动操作DOM实现超链接嵌入，代码示例如下：

替换后的超链接事件代码 #

hyperlink.addEventListener('click', () => {
    let userLink = prompt("Enter a URL");
    if (!userLink) return;

    // 补全HTTP/HTTPS前缀
    if (!/^https?:\/\//i.test(userLink)) {
        userLink = "http://" + userLink;
    }

    // 获取当前选区
    const selection = window.getSelection();
    if (selection.rangeCount === 0) return;

    const range = selection.getRangeAt(0);
    const selectedText = range.toString();
    if (!selectedText.trim()) return;

    // 创建<a>标签并替换选中内容
    const linkElement = document.createElement('a');
    linkElement.href = userLink;
    linkElement.textContent = selectedText;

    range.deleteContents();
    range.insertNode(linkElement);

    // 将光标移至链接末尾（可选）
    selection.removeAllRanges();
    const newRange = document.createRange();
    newRange.setStartAfter(linkElement);
    newRange.collapse(true);
    selection.addRange(newRange);
});

完整修改后的代码 #

HTML

<!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>chatbox</title>
    <link rel="stylesheet" href="css.css">
    <script defer src="javascript.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
</head>
<body>
    <div class="container">
        <div class="inner-container">
            <i class="bi bi-type-bold" id="bold"></i>
            <i class="bi bi-type-italic" id="italic"></i>
            <i class="bi bi-type-strikethrough" id="strikethrough"></i>
            <i class="bi bi-link-45deg" id="Hyperlink"></i>
            <i class="bi bi-list-ol" id="numbered-list" ></i>
            <i class="bi bi-list-ul" id="bulleted-list"></i>
            <i class="bi bi-blockquote-left" id="blockquote"></i>
            <i class="bi bi-code-slash" id="code-snippet"></i>
            <i class="bi bi-code-square" id="code-block"></i>
        </div>
        <div class="messages">
            <!-- <div>hi</div>
            <div>hello</div> -->
        </div>
        <form action="#">
            <div contenteditable="true" id="input" placeholder="Chat comes here..."></div>
        </form>
        <div class="inner-container">
            <i class="bi bi-plus-circle-fill"></i>
            <i class="bi bi-emoji-smile"></i>
            <i class="bi bi-at"></i>
            <button id="send">
            <i class="bi bi-send-fill" id="send-icon"></i>
            </button>
        </div>
    </div>
</body>
</html>

CSS

.container{
    background-color: #222529;
    display: flex;
    border-radius: 0.5rem;
    justify-content: space-evenly;
    flex-direction: column;
}

.inner-container{
    background-color: inherit;
    display: flex;
    height: 5vh;
    box-sizing: border-box;
    border-radius: 0.5rem;
    align-items: center;
}

div{
    color: white;
}

i{
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    color: #757575;

}

#input{
    display: block;
    width: 90%;
    height: 5vh;
    box-sizing: border-box;
    background-color: #222529;
    border: none;
    padding: 0px;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    color: #757575;
    outline: none;
}

#input:empty:before {
    content: attr(placeholder);
    color: #757575;
}

#send{
    margin-left: auto;
    margin-right: 1rem;
    background-color:#007a5a ;
    border: 0px;
    
}

#send-icon{
    color: white;
}

#send:active{
    background-color: #005f46;
}

.bold{
    font-weight: bold;
}

.italic{
    font-style: italic;
}

.strikethrough{
    text-decoration: line-through;
}

JavaScript

const bold = document.getElementById('bold');
const input = document.getElementById('input');
const italic = document.getElementById('italic');
const strikethrough = document.getElementById('strikethrough');
const hyperlink = document.getElementById('Hyperlink');

bold.addEventListener('click',()=>{
        input.classList.toggle('bold');
});

italic.addEventListener('click',()=>{
    input.classList.toggle('italic');
});

strikethrough.addEventListener('click',()=>{
    input.classList.toggle('strikethrough');
});

hyperlink.addEventListener('click', () => {
    let userLink = prompt("Enter a URL");
    if (!userLink) return;

    // 补全HTTP/HTTPS前缀
    if (!/^https?:\/\//i.test(userLink)) {
        userLink = "http://" + userLink;
    }

    // 获取当前选区
    const selection = window.getSelection();
    if (selection.rangeCount === 0) return;

    const range = selection.getRangeAt(0);
    const selectedText = range.toString();
    if (!selectedText.trim()) return;

    // 创建<a>标签并替换选中内容
    const linkElement = document.createElement('a');
    linkElement.href = userLink;
    linkElement.textContent = selectedText;

    range.deleteContents();
    range.insertNode(linkElement);

    // 将光标移至链接末尾（可选）
    selection.removeAllRanges();
    const newRange = document.createRange();
    newRange.setStartAfter(linkElement);
    newRange.collapse(true);
    selection.addRange(newRange);
});

内容的提问来源于stack exchange，提问作者firstuser