This is my codepen link https://codepen.io/santoshch/pen/LYxOoWO
I have otp field, When all 4 fields, if i fill and press backspace/delete button. then only it is moving back and deleting enterd numbers.
But issue with below code is, When i enter single digit in otp field and press backspace/delete button,
it's not moving backwards.(staying in same input field)
// Shift focus to next input field if max length reached
if (value.length >= maxlength) {
if (typeof this.activationKeyFields[index + 1] == 'undefined') {
e.preventDefault();
return;
}
this.$refs[`input-${parseInt(index + 1)}`][0].focus();
e.preventDefault();
}
else{
if (typeof this.activationKeyFields[index - 1] == 'undefined') {
e.preventDefault();
return;
}
this.$refs[`input-${parseInt(index - 1)}`][0].focus();
e.preventDefault();
}
},
Related
I am performing some validation on a series of input boxes. I need to ensure that a value entered is divisible by 6.
When the user tries to submit an invalid value, all other inputs are disabled until they correct the error, and a Div pops up explaining the issue.
The first approach I tried was capturing a keyup event of a Tab or Enter:
$(".test1").keyup(function(event) {
if((event.keyCode == 9) || (event.keyCode == 13)) {
event.preventDefault();
var valid = true;
if(parseInt($(this).val()) % 6 != 0){
valid = false;
$('#errorMessage').html("That's not divisible by 6");
}
if (!valid){
// Show error message and disable other text boxes
var position = $(this).position();
$('input').not(this).prop('disabled', true);
$("#validation").show();
$("#validation").offset({top:position.top, left:position.left + $(this).width()});
} else {
// Hide error message and enable other text boxes
$("#validation").delay(200).hide();
$('input').not(this).prop('disabled', false);
$(this).parent().next().find('.test1').focus();
}
}
});
This works fine when the user submits with an Enter, but if they tab it does the following:
If the validation is passed, it triggers again in the next text box
If the validation fails, the focus still moves to the next text box
If the validation failed (and the user had pressed enter) when the user corrects it the error Div is not removed when the resubmit using Tab
The second approach was to use the Change event:
$(".test2").change(function(){
var valid = true;
if(parseInt($(this).val()) % 6 != 0){
valid = false;
$('#errorMessage').html("That's not divisible by 6");
}
if (!valid){
// Show error message and disable other text boxes
var position = $(this).position();
$('input').not(this).prop('disabled', true);
$("#validation").show();
$("#validation").offset({top:position.top, left:position.left + $(this).width()});
} else {
// Hide error message and enable other text boxes
$("#validation").delay(200).hide();
$('input').not(this).prop('disabled', false);
$(this).parent().next().find('.test2').focus();
}
});
This also works fine with Enter, but this time if Tab is pressed after the user has corrected an error, focus is not passed onto the next text box.
See https://jsfiddle.net/bdgriffiths/sqrugh63/3/
(I also tried performing the validation using:
$('.test').on('input', function() { ...Do the validation... }
Which works fine, but triggers after each keystroke. i.e. When entering "12" the error would trigger after the "1" was pressed - which would be irritating.)
Turns out it was disabling the other inputs that was screwing this up.
Solved the issue by creating a CSS class to make the other inputs look disabled:
.disabledClass {
background-color: #eee;
color: #ccc;
border: 1px solid #ccc;
}
And then force the focus to stay in the cell until the validation error is corrected:
$(this).focus().select();
So the whole function now looks like this:
$(".test2").blur(function() {
var valid = true;
if (parseInt($(this).val()) % 6 != 0) {
valid = false;
$('#errorMessage').html("That's not divisible by 6");
}
if ((valid) || (!($(this).val()))) { // valid or blank
// Hide error message and enable other text boxes
$("#validation").fadeOut(500);
$('input').not(this).removeClass('disabledClass');
} else { // not valid
// Show error message and disable other text boxes
var position = $(this).position();
$('input').not(this).addClass('disabledClass');
$("#validation").fadeIn(500);
$("#validation").offset({
top: position.top,
left: position.left + $(this).width()
});
$(this).focus().select();
}
});
https://jsfiddle.net/bdgriffiths/sqrugh63/9/
I have a text input that I want to execute a function when enter is pressed. I used if condition to determine if enter is pressed but this causes the user not to be able to type in the input box. What can I put in the else condition to allow them to type normally?
JsFiddle
function addItem(e) {
e.preventDefault(); // Prevent form being submitted
var text = $('input:text').val(); // Get value of text input
var itemArr = text.split(',');
var lngth = itemArr.length
for(i = 0; i < lngth; i++)
{
$list.append('<li>' + itemArr[i] + '</li>'); // Add item to end of the list
updateCount(); // Update the count
} // End loop
$('#addItems').val(''); // Empty the text input
return false;
}
$('#addItems').keypress(function(e) {
if(e.which == 13) {
addItem();
}
return false;
});
Remove return false; from the keypress function.
$('#addItems').keypress(function(e) {
if(e.which == 13) {
addItem();
}
else {
return true;
}
return false;
});
Jusr remove return false from the keypress event
You can see this Question
return false; successfully cancels an event across browsers if called at the end of an event handler attribute in the HTML.
and to prevent form from form being submitted, you can add onsubmit="return false" to the form
Demo
So basically what I'm trying to do is identify if the input bar has "y" typed in it and when tab key is pressed replace that y with "youtube ".
Javascript
var input = document.getElementById('searchbar').value;
var words = input.split(" ");
$("#searchbar").keydown(function(e) {
if(e.keyCode == 9) {
e.preventDefault();
if(input == 'y') {
$('#searchbar').text('youtube');
}
}
});
Currently I'm not getting any error messages, its just not working. The tab key also moves the focus away from the input bar.
Here is why
You should be getting value on keydown , not on page load as at the time of loading page value is empty.
As you are using jquery , get current value of input using jquery facade/selector
Finally you update the input box value not text
Try this
$("#searchbar").keydown(function(e) {
var input = $('#searchbar').val();
var words = input.split(" ");
if(e.keyCode == 9) {
if(input == 'y') {
$('#searchbar').val('youtube');
}
e.preventDefault();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter Search Term
<input type="text" id="searchbar">
Move across each word in a sentences.
I have created shortcut key for enter in my application as, it will move towards and focus each input control in my page.
I need to set keyboard shortcuts for tab as, it has to select each string of a sentences which are in some textbox. For example txtAddress contain value like "Hi i am new user", if I press tab key it has to select a string "hi" then "i" then "am" then "new" then "user" after that it has to focus a next input control.
I have tried with following JS to focus next input control but don't know how to select each word in textbox.
$(document).unbind('keydown');
$(document).bind('keydown', 'tab', function assets() {
try {
var inputs = $(":input:not(input[type='hidden'])");
var CurInput = inputs.get(inputs.index(document.activeElement));
var nextInput = inputs.get(inputs.index(document.activeElement) + 1);
if (CurInput && nextInput.type == "text" && CurInput.style.display != "none") {
var strval = CurInput.value;
if (!strval) {
if (nextInput && nextInput.type != "hidden" && nextInput.style.display != "none") {
nextInput.focus();
}
}
}
else if (nextInput && nextInput.type != "hidden" && nextInput.style.display != "none") {
nextInput.focus();
}
return false;
}
catch (e) {
}
});
http://jsbin.com/cihahigevo/1/edit?html,js,output
var textarea = $('textarea')[0],
index = 0;
$(document).on('keydown.tab', function(e){
if( e.keyCode == 9 ){
textarea.focus();
textarea.value = textarea.value.trim() + ' ';
index = textarea.value.indexOf(' ', index) + 1;
textarea.setSelectionRange(0, index);
}
return false;
});
It's never a good idea to override a users keyboard, especially the tab button.
The tab button is used by people who (for whatever reason) don't use a mouse to navigate sites by 'tabbing' between buttons, form fields, etc.
If you remove this functionality by overriding the tab key, you've suddenly made your site unaccessible to these users.
You may also run afoul of you countries laws on website accessibility (the Disability & Discrimation act in the UK).
In my Chat application project, I am trying to restrict spaces when the user has just pressed Space and then Enter. pressing Enter will show entered Text into a div. Please see the comments in the code to understand clearly.
#txtmsg --> ID of TextBox field
$('#txtmsg').keypress(function (e)
{
if (e.which == 13)
{
//Disable default function of Enter key
e.preventDefault();
//Checks whether the user has entered any value or not
if ($('#txtmsg').val().length > 0)
{
//if(user has not entered only spaces....)?
//transfers the entered value in the text field to div
chat.server.send($('#txtmsg').val());
$('#txtmsg').val('');
}
}
});
See http://api.jquery.com/jQuery.trim/ :
if($.trim($('#txtmsg').val()) !== "") { ... }
The check would be:
var message = $('#txtmsg').val(); //cache the message
if(message.replace(/\s/g, "").length !== 0) { //if the message has something other than spaces
//send the message
}
Note that /\s/ matches all kinds of white-space characters; tabs, spaces, new lines, (other weird space characters).
Try:
if ($('#txtmsg').val().length > 0 && /^\s+$/.test($('#txtmsg').val()) === false) {
...
}