I have the requirement that in a textbox a user can jump to the next word enclosed in [] on a tab out
for example
Hi [this] is [an] example. Testing [this]
So when my cursor is at Hi and I do a tab out , the characters enclosed in the [this] are highlighted
and when I again do a tabl out th next characters enclosed in following [an] are highlighted.
This works fine
Now the requirement is whatever the text including the special chars between [] needs to be highlighted
case 1: when I have trailing ]]], it only highlights leading [[[ and ignores ]]]]
e.g
case 2: In case of multiple trailing ] e.e [this]]]] is [test], ideally one a single tabl out from this , it should go to next text enclosed in [] but a user has to tab out 4 times one tab per training ] to go to next [text]
strong text
The code is
$(document).ready(function() {
$('textarea').highlightTextarea({
color : '#0475D1',
words : [ "/(\[.*?\])/g" ],
textColor : '#000000'
});
$('textarea').live('keydown', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
var currentIndex = getCaret($(this).get(0))
selectText($(this), currentIndex);
return false;
}
});
});
function selectText(element, currentIndex) {
var rSearchTerm = new RegExp(/(\[.*?\])/);
var ind = element.val().substr(currentIndex).search(rSearchTerm)
currentIndex = (ind == -1 ? 0 : currentIndex);
ind = (ind == -1 ? element.val().search(rSearchTerm) : ind);
currentIndex = (ind == -1 ? 0 : currentIndex);
var lasInd = (element.val().substr(currentIndex).search(rSearchTerm) == -1 ? 0
: element.val().substr(currentIndex).indexOf(']'));
var input = element.get(0);
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(ind + currentIndex, lasInd + 1 + currentIndex);
} else if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', lasInd + 1 + currentIndex);
range.moveStart('character', ind + currentIndex);
range.select();
}
}
function getCaret(el) {
if (el.selectionEnd) {
return el.selectionEnd;
} else if (document.selection) {
el.focus();
var r = document.selection.createRange();
if (r == null) {
return 0;
}
var re = el.createTextRange(), rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return rc.text.length;
}
return 0;
}
Please let me know to handle two above cases
