JavaScript - Insert text from 2 inputs into a TextArea a cursor position : Code Entry

HTML

Attention: Click in the textarea, then hit a key (Spacebar recommended) to activate Preview.
You can edit the HTML and CSS in this demo.
Copy each field to a new file and save it to run this on your own system.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Untitled Document</title>

<script type="text/javascript">
    function insertAtCursor(myField, myValue, myValue1) {
        //IE support
        if (document.selection) {
            myField.focus();
            sel = document.selection.createRange();
            sel.text = "[url=" + myValue + "]";
            sel.text = "" + myValue1 + "[/url]";
        }
        //MOZILLA/NETSCAPE support
        else if (myField.selectionStart || myField.selectionStart == '0') {
            var startPos = myField.selectionStart;
            var endPos = myField.selectionEnd;
            myField.value = myField.value.substring(0, startPos) +
                "[url=" + myValue + "]" +
                "" + myValue1 + "[/url]" +
                myField.value.substring(endPos, myField.value.length);
        } else {
            myField.value += "[url=" + myValue + "]";
            myField.value += "" + myValue1 + "[/url]";
        }
    }
</script>
<style type="text/css">
#code{
    height:5em;
    width:100%;
}

.input{
    border:5px solid #0f0;
    padding:5px;
	background-color:#000;
	color:#0F0;
	border:1px double #F00;
}
  </style>
</head>

<body>
<form name="myform">
<label>Content</label>
<div><textarea name = "txta" id="code" rows = "10" cols = "50">Place the cursor somewhere in this text and add a link. 
The link will be added at the cursor position.</textarea></div>
<label>URL</label>
<div><input type="text" name="txtb" class="input" value="" /></div>
<label>Name</label>
<div><input type="text" name="txtc" id="URLName" class="input" value="" /></div>

<input type="button" class="input" value="Add Text" onclick="insertAtCursor(document.myform.code, document.myform.txtb.value, document.myform.txtc.value)">
</form>

<script type="text/javascript">
//<![CDATA[
 const quotearea = document.getElementById('code');
 const output = document.getElementById('URLName');
 let md = false;

</body>
</html>

Preview

About Company

Top Viewed Articles