Author - StudySection Post Views - 919 views
textarea

How to make a text clickable under the angle brackets in the textarea

In this topic, I will explain how to make any text clickable under the angular brackets in textarea using devextreme.

For example I have a normal textarea field name ‘Description’ in this textarea some text within the angular brackets <…….> like textDemo1, textDemo2…. Check the screenshot attached below.

textarea1
When we click any text under the angular brackets, A popup will open and in this popup I have added a text box and we can edit the text under the angular brackets <textDemo1>.

textarea2
After entering the text in the text box and clicking save button the angular brackets text will be replaced we can see in the below screenshot.

textarea3
We can achieve this functionality using below code.

Html code

<div id="customDescPopupContainer"></div>
<textarea id="descriptionId" rows="2" cols="48" onclick="getCursorPos(this);"></textarea>


JavaScript code

function getCursorPos(e) {
var descriptionData = e.value;
var tagElements = getTagElementsFromDescription(descriptionData);
console.log(tagElements);
var selectedDescriptionTags = tagElements;
var curPosStart = document.getElementById(e.id).selectionStart;
let clickedTag = null;
var dataType = "";
var popupTitle = "";
for (var i = 0; i < selectedDescriptionTags.length; i++){
if (curPosStart > selectedDescriptionTags[i]["start"] && curPosStart < selectedDescriptionTags[i]["end"]) {
dataType = selectedDescriptionTags[i]['datatype'];
popupTitle = selectedDescriptionTags[i]['element'];
clickedTag = selectedDescriptionTags[i];
break;
}
}
if (clickedTag != null) {
$('#customDescPopup').remove();
dateCustomDescriptionPopup(e.value, e.id, dataType, popupTitle);
}
else {
//alert("No tag element found ");
}
}
function getTagElementsFromDescription(description) {
let descTagBasedTextlist = []; let startBracketPosition = -1;
for (var i = 0; i < description.length; i++) {
if (description.charAt(i) == "<") {
startBracketPosition = i;
}
if (startBracketPosition > -1 && description.charAt(i) == ">") {
let tagElement = description.substring(startBracketPosition, i);
var type = tagElement.split('<')[1]; var dataType = 'string'; let tagElementJson = { "element": tagElement, "start": startBracketPosition, "end": i, 'datatype': dataType }; descTagBasedTextlist.push(tagElementJson); startBracketPosition = -1; } } return descTagBasedTextlist; }

getTagElementsFromDescription(descriptionData) in this function I have applied simple logic. First of all, I found the angular bracket starting position and angular bracket end position and then found the cursor position. If the cursor is within the position of the angular bracket then the popup will be open.

Devextreme code in javascript

function dateCustomDescriptionPopup(descriptionData, descriptionTextAreaId, dataType, popupTitle) {
$('#customDescPopupContainer').dxPopup({
width: 300,
height: 200,
showTitle: true,
title: popupTitle,
visible: true,
dragEnabled: true,
closeOnOutsideClick: false,
showCloseButton: true,
position: {
at: "center",
my: "center",
},
onShowing: function (e) {
....
},
onShown: function (e) {
$('#customDescTextBox').dxTextBox('instance').focus();
},
contentTemplate: function (contentElement) {
contentElement.append(
$("<div id='customDescTextBox' style='margin-top:30px;'></div>").dxTextBox({
visible: true,
focusStateEnabled: true,
}),
$("<div id='saveButtonContainer' style='float:right; margin-top:20px; margin-left:-5px; color:white; margin-right:0px;' class='btn btn-primary'></div>").dxButton({
text: "Save",
onClick: function (e) {
.....
.....
}
}),
$("<div id='cancelButtonContainer' style='float:right; margin-top:20px;' class='btn'></div>").dxButton({
text: "Cancel",
onClick: function (e) {
....
}
})
)
}
});
$('#customDescPopup').dxPopup("show");
$("#customDescTextBox .dx-texteditor-input")[0].selectionStart = 0;
}

function dateCustomDescriptionPopup(descriptionData, descriptionTextAreaId, dataType, popupTitle) in this function I have written the code for open the popup and under the popup I have appended a textBox and Save and Cancel and their functionality according to the my requirement. You can apply your own functionality according to your requirements.

StudySection gives an opportunity to beginners and experts in .NET framework to go through StudySection’s .NET Certification Exam and get a .NET certification for enhancement of career in programming. If you have knowledge of the .NET framework then you can get a certificate through an online exam at StudySection.

Leave a Reply

Your email address will not be published. Required fields are marked *

fiteesports.com rivierarw.com cratosroyalbet betwoon grandpashabet grandpashabet giriş deneme bonusu veren siteler casino siteleri