0

My problem : when I select the text in the input and click on hyperlink symbol I get a prompt then when I type a URL in that prompt then the hyperlink is not getting added to the text in the input area.

And another question is : Is there any alternative to execCommand() in javascript embed the hyperlink in the text

please help any help is appreciated

my 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="#">
                <input type="text" placeholder="Chat comes here..." id="input">
            </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>

my css :

.container{
    background-color: #222529;
    /* width: 90vw;
    height: 20vh; */
    display: flex;
    /* margin: auto; */
    border-radius: 0.5rem;
    justify-content: space-evenly;
    flex-direction: column;
}

.inner-container{
    background-color: inherit;
    display: flex;
    /* width: 100%; */
    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;
}


/* input:active{
    color: pink;
    background-color: rebeccapurple;
} */


#input:focus{
    outline: none;
}


#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;
}

my 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(/http/i.test(userLink)){
        document.execCommand('createLink',false,userLink)
    }else{

        userLink = "http://"+userLink;
        document.execCommand('createLink',false,userLink);
    }

})
firstuser
  • 9
  • 5
  • Check https://stackoverflow.com/questions/60581285/execcommand-is-now-obsolete-whats-the-alternative – James Oct 13 '22 at 20:58
  • @James thanks for your suggestion could you please provide another way of embedding the hyperlink in the text – firstuser Oct 14 '22 at 03:48

0 Answers0