Welcome aboard! We are happy you are here and wish you good net-raft!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js " type="text/javascript"></script>
<style>
.btn-group { display: inline-block; }
</style>
</head>
<body>
<div class="container">
<span class="btn-group">
<button type="button" class="btn btn-primary btn-xs pnl1">(</button>
<button type="button" class="btn btn-primary btn-xs pnl1">)</button>
<button type="button" class="btn btn-primary btn-xs pnl1">[</button>
<button type="button" class="btn btn-primary btn-xs pnl1">]</button>
<button type="button" class="btn btn-primary btn-xs pnl1">{</button>
<button type="button" class="btn btn-primary btn-xs pnl1">}</button>
<button type="button" class="btn btn-primary btn-xs pnl1">&</button>
<button type="button" class="btn btn-primary btn-xs pnl1">|</button>
<button type="button" class="btn btn-primary btn-xs pnl1"><</button>
<button type="button" class="btn btn-primary btn-xs pnl1">></button>
<button type="button" class="btn btn-primary btn-xs pnl1">/</button>
<button type="button" class="btn btn-primary btn-xs pnl1">+</button>
<button type="button" class="btn btn-primary btn-xs pnl1">-</button>
<button type="button" class="btn btn-primary btn-xs pnl1">%</button>
</span>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
<script>
$(document).ready(function () {
function setCaretPosition(ctrl, pos) {
// Modern browsers
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos-1);
// IE8 and below
} else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
$(".pnl1").on('click', function() {
var $value = $("#comment");
var select = $value[0].selectionStart;
var textArea = $value.val();
var valueToAdd =$(this).text();
$value.val(textArea.substring(0, select) + valueToAdd + textArea.substring(select));
select = select + 2;
var input = document.getElementById('comment');
setCaretPosition(input, select);
});
});
</script>
</body>
</html>
The most helpful JQUERY solutions
plugin get client ip address using jqueryJQUERY Click to see more ... 10.5K 1.8K