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=".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.
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./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.
Share Improve this question asked May 7, 2015 at 10:15 Y.SY.S 1,8623 gold badges18 silver badges35 bronze badges 3- Why not just say: $('#post-txt').val(str + '[TEXT]'); – Kostas Commented May 7, 2015 at 10:20
- @Tsalikidis Your solution doesn't work. – Y.S Commented May 7, 2015 at 10:21
- I didn't claim it's a solution... I just asked why make it plicated using substring.. – Kostas Commented May 7, 2015 at 10:23
5 Answers
Reset to default 5that'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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>I took the liberty to make a jquery function out of the function posted by Alexandru Severin:
$.fn.replaceCharOnKeyPress = function(chr, replacement) {
var moveCursorBy = replacement.length - chr.length;
this.each(function() {
$(this).keypress(function(e) {
if (e.key == chr) {
// 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;
}
});
});
return this;
};
Usage example:
$(form).find('input.price').replaceCharOnKeyPress(',', '.');
Live demo
<script type="text/javascript">
$("#input").on('input keydown paste', function() {
$(this).val($(this).val().replace(/@(?![[])/g, '@[some text]'));
var key = event.keyCode || event.charCode;
if (key == 8 || key == 46) {
this.select();
}
});
</script>
This regex **/@(?![[])/g** makes sure that only a single @ is matched not @[ there by running the code only once.
This code also makes sure that even if the user pasted the @ symbol they will get @[some text] in the input box.
this.select() makes sure that @ will not fire again when the user tries to delete with either the backspace or delete button (when you delete '[' from '@[' the regex is no longer able to differentiate, therefore the code fires @[some text] again this is what this.select() prevents by selecting the entire @[some text] and removing it in on swoop).
Any Questions leave a ment below!
$(document).find('input').keypress(function(evt){
if(evt.which==50){
$(this).val($(this).val()+'[Letter to replace]');
evt.preventDefault();
}
});
Try this...