Menu
I have a textarea input element,
If the user types "@" I want to replace it with @[someTextHere].
I'm using JQuery's keypress event, but I havent been able to get what I want, I keep getting the "@" at the end of the string , I.e. [someTextHere]@.
Is it possible?
My Code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<textarea id="post-txt"></textarea>
</body>
</html>
<script>
$('#post-txt').keypress(function(event){
var str = $('#post-txt').val();
if(String.fromCharCode(event.which) == '@'){
$('#post-txt').val(str.substring(0,str.length) + '[TEXT]');
}
})
</script>
Assistance would be appreciated.
290
that's because he adds the character after the execution of the function.you can prevent the addition of the character and add it in your code.
if(String.fromCharCode(event.which) == '@'){
event.preventDefault()
$('#post-txt').val(str + '@[TEXT]');
}
Here is a wonderful solution from kristofdegrave which takes into account selection and the cursor position.
var replacedChar = '@';
var replacement = '@[SomeTextHere]'
var moveCursorBy = replacement.length - replacedChar.length; //Or 0 if you want the cursor to be after between '@' and '[SomeTextHere]'
$('textarea').keypress(function(e){
if(e.key == replacedChar){
// IE
if(document.selection){
// Determines the selected text. If no text selected, the location of the cursor in the text is returned
var range = document.selection.createRange();
// Place the replacement on the location of the selection, and remove the data in the selection
range.text = replacement;
// Chrome + FF
} else if(this.selectionStart || this.selectionStart == '0') {
// Determines the start and end of the selection.
// If no text selected, they are the same and the location of the cursor in the text is returned
// Don't make it a jQuery obj, because selectionStart and selectionEnd isn't known.
var start = this.selectionStart;
var end = this.selectionEnd;
// Place the replacement on the location of the selection, and remove the data in the selection
$(this).val($(this).val().substring(0, start) + replacement + $(this).val().substring(end, $(this).val().length));
// Set the cursor back at the correct location in the text
this.selectionStart = start + moveCursorBy + 1;
this.selectionEnd = start + moveCursorBy + 1;
} else {
// if no selection could be determined,
// place the replacement at the end.
$(this).val($(this).val() + replacement);
}
return false;
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
