{"id":4869,"date":"2021-08-25T04:29:28","date_gmt":"2021-08-25T04:29:28","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=4869"},"modified":"2021-08-25T05:42:46","modified_gmt":"2021-08-25T05:42:46","slug":"how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/","title":{"rendered":"How to make a text clickable under the angle brackets in the textarea"},"content":{"rendered":"

In this topic, I will explain how to make any text clickable under the angular brackets in textarea using devextreme.<\/p>\n

For example I have a normal textarea field name \u2018Description\u2019 in this textarea some text within the angular<\/a> brackets <…….> like textDemo1, textDemo2\u2026. Check the screenshot attached below.<\/br>
\n\"textarea1\"\/
\nWhen 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><\/strong>.<\/br>
\n\"textarea2\"\/
\nAfter 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.<\/br>
\n\"textarea3\"\/
\nWe can achieve this functionality using below code.<\/p>\n

Html code<\/h2>\n

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

JavaScript code<\/h3>\n

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

Devextreme code in javascript<\/h3>\n

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

function dateCustomDescriptionPopup(descriptionData, descriptionTextAreaId, dataType, popupTitle)<\/em><\/strong> 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.<\/p>\n

StudySection gives an opportunity to beginners and experts in .NET framework to go through StudySection\u2019s .NET Certification Exam<\/a> 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.<\/em>
\n<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

In this topic, I will explain how to make any text clickable under the angular brackets in textarea using devextreme.<\/p>\n","protected":false},"author":1,"featured_media":4870,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[698,697],"acf":[],"yoast_head":"\nHow to make a text clickable under the angle in the textarea - SS Blog<\/title>\n<meta name=\"description\" content=\"In this topic, I will explain how to make any text clickable under the angular brackets in textarea using devextreme.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to make a text clickable under the angle in the textarea - SS Blog\" \/>\n<meta property=\"og:description\" content=\"In this topic, I will explain how to make any text clickable under the angular brackets in textarea using devextreme.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-25T04:29:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-25T05:42:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/08\/textarea.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"How to make a text clickable under the angle brackets in the textarea\",\"datePublished\":\"2021-08-25T04:29:28+00:00\",\"dateModified\":\"2021-08-25T05:42:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/\"},\"wordCount\":285,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"Text\",\"Textarea\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/\",\"url\":\"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/\",\"name\":\"How to make a text clickable under the angle in the textarea - SS Blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2021-08-25T04:29:28+00:00\",\"dateModified\":\"2021-08-25T05:42:46+00:00\",\"description\":\"In this topic, I will explain how to make any text clickable under the angular brackets in textarea using devextreme.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to make a text clickable under the angle brackets in the textarea\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to make a text clickable under the angle in the textarea - SS Blog","description":"In this topic, I will explain how to make any text clickable under the angular brackets in textarea using devextreme.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/","og_locale":"en_US","og_type":"article","og_title":"How to make a text clickable under the angle in the textarea - SS Blog","og_description":"In this topic, I will explain how to make any text clickable under the angular brackets in textarea using devextreme.","og_url":"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2021-08-25T04:29:28+00:00","article_modified_time":"2021-08-25T05:42:46+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/08\/textarea.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"How to make a text clickable under the angle brackets in the textarea","datePublished":"2021-08-25T04:29:28+00:00","dateModified":"2021-08-25T05:42:46+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/"},"wordCount":285,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["Text","Textarea"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/","url":"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/","name":"How to make a text clickable under the angle in the textarea - SS Blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2021-08-25T04:29:28+00:00","dateModified":"2021-08-25T05:42:46+00:00","description":"In this topic, I will explain how to make any text clickable under the angular brackets in textarea using devextreme.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/how-to-make-a-text-clickable-under-the-angle-brackets-in-the-textarea\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to make a text clickable under the angle brackets in the textarea"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":1205,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/4869"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=4869"}],"version-history":[{"count":8,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/4869\/revisions"}],"predecessor-version":[{"id":4881,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/4869\/revisions\/4881"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/4870"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=4869"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=4869"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=4869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}