Insert character at Cursor position in VUE JS - javascript

I have been trying to insert emoji in textarea exactly where the cursor is at. I looked around how tos in the web could not find anything specific in VUE JS. Most of them are in plain JS.
I have this Code
<div class="picker" v-show="showPicker">
<click-outside :handler="handleClickOutside">
<picker
set ="messenger"
title="Pick your emoji…"
emoji="point_up"
#click="addEmoji"
:emoji-size="16"
>
</picker>
</click-outside>
</div>
<textarea id="greeting_text_input" class="form-control"
type="text"
v-model="greeting_text"
rows="8"
required
placeholder="Hi {first-name}! Welcome to our bot. Click on the ‘Get
Started’ button to begin
">
</textarea>
My Method
addEmoji(emoji){
this.greeting_text += emoji.native;
this.showPicker = !this.showPicker;
}
Obviously, this code will add the character (emoji, in my case) to the last of the string. I need a pure vuejs solution for this.
What would be the best practise for this kind of problem in Vue? as there are few solutions in the web that based either in vanilla JS or Jquery.

Two steps:
1 get textarea element using a vue-way:
1.1 Add ref attrbute to textarea tag in your template code:
<textarea ref="ta"></textarea>
1.2 get this element after mounted hook of this component:
let textarea = this.$refs.ta
2 get cursor position of textarea element.
let cursorPosition = textarea.selectionStart
Here is reference: ref

<!-- tag -->
<textarea ref="yourTextarea" v-model.trim="txtContent" ......></textarea>
// methods:
insertSomething: function(insert) {
const self = this;
var tArea = this.$refs.yourTextarea;
// filter:
if (0 == insert) {
return;
}
if (0 == cursorPos) {
return;
}
// get cursor's position:
var startPos = tArea.selectionStart,
endPos = tArea.selectionEnd,
cursorPos = startPos,
tmpStr = tArea.value;
// insert:
self.txtContent = tmpStr.substring(0, startPos) + insert + tmpStr.substring(endPos, tmpStr.length);
// move cursor:
setTimeout(() => {
cursorPos += insert.length;
tArea.selectionStart = tArea.selectionEnd = cursorPos;
}, 10);
}

I learned about setSelectionRange from a different question, and I used it to handle credit card number input. I will show my solution here so a person can perhaps become inspired by it.
template:
<input
ref="input"
v-model="value"
#input="handleChange"
>
instance methods:
data() {
return {
lastValue: '',
}
},
methods: {
setCursorPosition(el, pos) {
el.focus();
el.setSelectionRange(pos, pos);
},
handleChange() {
// handle backspace event
if (this.value.length < this.lastValue.length) {
this.lastValue = this.value;
this.$emit('input-changed', this.value);
return;
}
// handle value-edit event
if (this.$refs.input.selectionStart < this.value.length) {
const startPos = this.$refs.input.selectionStart;
this.value = this.value.replace(/\W/gi, '').replace(/(.{4})/g, '$1 ').trim();
this.$nextTick(() => this.setCursorPosition(this.$refs.input, startPos));
this.lastValue = this.value;
this.$emit('input-changed', this.value);
return;
}
// handle everything else
this.value = this.value.replace(/\W/gi, '').replace(/(.{4})/g, '$1 ').trim();
this.lastValue = this.value;
this.$emit('input-changed', this.value);
},
},
The goal with the above code is to add spaces into a credit card input, so 1234123412341234 is automatically reformatted to 1234 1234 1234 1234. A person venturing into this territory will notice that problems arise when editing the input value.
You can see there are three conditions in my sample above. The last one is the default which simply reformats the current value with a 2-step combo: remove all spaces then adds a space every 4th character.
If you comment out the two if blocks, you can watch the problems emerge.
The first if block handles the backspace event. As you can see, every time the input changes, the value is captured as this.lastValue. When you press backspace, the goal of the first condition is to NOT run the regex. In my opinion, this is better UX. If you comment out that condition, you can see.
The second if block handles the editing events. A good way to test it, is to enter a valid CC but omit the 3rd character, so that everything is off by one. Then add the character in. Everything should be good. Likewise if you backspace multiple characters out. The goal of the second condition is to properly manage the cursor position (or caret position if you prefer that nomenclature).
You can safely delete the first condition and all references to lastValue and the code will still work. This is arguably simpler but worse UX.

Related

Basic JS: Adding characters at cursor position, while maintaining cursor position

Say I am making a basic Calculator that allows whole expressions to typed by the user. I'll use a simple <input> tag.
The user can type whatever they want, but I want to make it even easier for the client, I want to add a closing parenthesis immediately after they type (, so I set up my javascript to detect when ( is input by into the input field, then += a ) to the input field.
The problem with my code is that it adds the parenthesis to the end of the input, regardless of where they type the parenthesis, even at the beginning.
How can I add a character where ever the cursor is?
My code is as follows:
input = document.querySelector("input[type=text]");
input.addEventListener(`keyup`, (event)=>
{
if(event.key === `(`)
{
input.value+=`)`;
}
});
<input type="text" placeholder="Put mathematical expression"></input>
I believe that should solve your problem.
let input = document.querySelector("input[type=text]");
input.addEventListener(`keyup`, (event) => {
if(event.key === '(') {
let cursorPos = input.selectionStart;
input.value = input.value.substr(0, cursorPos) + ')' +
input.value.substr(cursorPos);
}
});

Change input to uppercase without the cursor jumping to the end of the text

I'm using the following code to change my input value to uppercase:
<script>
function uppercase(z){
v = z.value.toUpperCase();
z.value = v;
}
</script>
<input type="text" id="example" onkeyup="uppercase(this)">
The problem is that when I type something in the middle of the text, the cursor jumps to the end of it. Searching on Google I tried to following code but it didn't work at all:
function uppercase(z){
document.getElementById(z).addEventListener('input', function (e) {
var target = e.target, position = target.selectionStart; // Capture initial position
target.value = target.value.replace(/\s/g, ''); // This triggers the cursor to move.
v = z.value.toUpperCase();
z.value = v;
target.selectionEnd = position; // Set the cursor back to the initial position.
});
}
The first code is working fine, but I still don't know how to prevent the cursor from jumping.
You can also set the cursor position onkeyup (or whatever you are using, as long you get a reference to the input element)
function withSelectionRange() {
const elem = document.getElementById('working');
// get start position and end position, in case of an selection these values
// will be different
const startPos = elem.selectionStart;
const endPos = elem.selectionEnd;
elem.value = elem.value.toUpperCase();
elem.setSelectionRange(startPos, endPos);
}
function withoutSelectionRange() {
const elem = document.getElementById('notWorking');
elem.value = elem.value.toUpperCase();
}
<div style="display: flex; flex-direction: column">
<label for='working'>Uppercase text with selection range</label>
<input id='working' type='text' onkeyup="withSelectionRange()"></input>
<label for='notWorking'>Uppercase text input without selection range</label>
<input id='notWorking' type='text' onkeyup="withoutSelectionRange()"></input>
</div>
Link to codepen
You can achieve this by simply adding some CSS styling:
#example {
text-transform: uppercase;
}
This will make all the letters in the input field appear as uppercase, but the value would still be the same. If you need the value to be uppercase, transform it to uppercase the moment you need it (right before a submit for example)
I have been searching hours after hours for an solution for this same issue.
Adding CSS did the trick for me, except there is a specific requirement that our backend api only accepts upper-cased string.
So besides:
#example {
text-transform: uppercase;
}
I also added callbacks that listen to onBlur and keydown.enter and converts the input value to upper case when those events get triggered.
P.S.:
No sample code as I'm just sharing my thoughts for people who had the same headaches and doesn't want to hack on HTMLInputElement.setSelectionRange.

Limit rows in HTML5 textarea

I'm looking for a solution to a problem, but I'm not able to find it. It could be in AngularJS or in Javascript (then I'll translate it in AngularJS). The problem is that I have to limit the rows of a simple textarea. The attribute 'rows=x' of HTML5 limit just the view. I have to limit the lines. The problem is that even if graphycally the lines go down, the components looks at it as a unique line. The user has to press ENTER to create a new line. But, I have to limit the lines.
I did this directive:
angular.module('app').directive('maxlines', function (): any {
return function (scope: any, element: any, attrs: any) {
element.bind("keydown keypress", function (event: any) {
if (event.which === 13) {
var text = element.val(),
numberOfLines = (text.match(/\n/g) || []).length + 1,
maxRows = parseInt(element.attr('rows'));
if (event.which === 13 && numberOfLines === maxRows) {
return false;
}
}
});
};
});
It works if I press ENTER, but it doesnt work if I continue to write withouth press enter.
I think you can do this with pure HTML.
<textarea cols="20" rows="5" wrap="hard" maxlength="100">
The wrap="hard" means that once the user has reached the end of the line - in this case, 20 characters - a newline will be inserted.
Once the user has reached 100 characters - the same as filling in 5 lines with 20 characters - no more input will be allowed.
Now, this doesn't stop someone from adding 10 lines with 10 characters - but does it get close to what you want to do?
This worked for me:
#your-textarea {
max-height: 5rem;
min-height: 2rem;
}
The user should be able to resize within that threshold.

jQuery .val() ignoring trailing decimal points

I am currently working on limiting the allowed input in a numeric text field. I check the length of the value of the input field, if it is >= to the maxlength attribute, don't input anything.
$('input[maxlength]').on('keyup', '', null, function(event) {
var ref = $(this),
val = ref.val();
if ( val.length >= this.maxLength && event.which != 8){
return false;
}
}
However, if the currently value of the field ends in a decimal (eg "4."), then the val() method returns "4", which throws off the whole process. How can I read the contents of the input field while including the trailing decimal points?
http://jsfiddle.net/n3fmw1mw/329/ (Type in '4.' and you'll see what I'm talking about.)
EDIT: I've tried something from Mr. Hill's suggestion and now I have this
$('input[maxlength]').on('keydown', '', null, function(event) { //enforce maxlength on all inputs, not just text inputs
var ref = $(this);
ref.attr('type','text');
var val = ref.val();
if ( val.length >= this.maxLength && event.which != 8){
ref.attr('type','number');
return false;
}
ref.attr('type','number');
});
But now nothing is being inserted into my text box, even if debugging and seeing that we aren't returning false.
The decimal is being dropped because your input type is number. Set your input type to text.
<input type="text" id="textbox1"/>
Here's a working fiddle.
EDIT
Based on your new requirement of not being able to change the source, the code below should get you pointed in the right direction.
jQuery does not allow you to change the type of an element. To do it, you must remove the element and add one of the correct type in its place. The code below does just that.
Note: In an effort to make the code more reusable, I added a class to your element and then edited all elements with that particular class.
// Add class to identify that element type needs changed
$("#textbox1").addClass("numberToText");
// Swap number type input with text
$('.numberToText').each(function() {
$("<input type='text' />").attr({
id: this.id,
name: this.name,
value: this.value
}).insertBefore(this);
}).remove();
$("#textbox1").keyup(function() {
$('#log').append("Value: " + $('#textbox1').val() + '<br/>');
});
$(".button").click(function() {
$('#log').append("Value: " + $('#textbox1').val());
})
Here's a working fiddle.

Detect first character in textfield with Jquery

I'd like to know how to do the following with Jquery:
I have 1 textfield in a form.
Whenever the first character is a number, change the attr name of this field to 'number'. If the first character is a letter, change this attr name to 'letter'.
!! This also has to work when a number or text is copy-pasted into the field.
Thanks!
Jeroen
Bind (some) event(s) to the text field: The keyup event is used to update the name attribute when the user modifies the text (including shortcut CTRL+V copy-pasting), the paste and mousemove events are used to deal with copy-pasting (dragging, contextmenu).
$("#your-input").bind("keyup paste mousemove", function() {
var char = this.value.charAt(0); // Use vanilla JavaScript to get the
// first character of the text field
if (/[0-9]/.test(char)) { // Test against a pattern: digit
$(this).attr("name ", "number");
} else if (/[a-zA-Z]/.test(char)) { // Else, pattern: letters
$(this).attr("name", "letter");
} else { // Finally, no name?
$(this).attr("name", "");
}
});
Remove else {...}, and replace else if(/[a-zA-Z]/.test(char)) { with else { if you want the default name to be letter.
Something like this:
$("#yourformid").submit(function(){
var input = $("#yourinputid"),
val = input.val();
input.attr("name", /^\d/.test(val) ? "number" :
/^[A-Z]/i.test(val) ? "letter" : "");
});
It's difficult to handle paste in all browsers, but if you just set the attribute when the form is submitted you're covered no matter what the user does including drag'n'drop changes to the field. (Obviously I'm assuming it doesn't matter what the attribute is before submit.)

Categories