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">
Related
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();
}
},
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) {
...
}
How do I get the index of the current input text field I'm currently in? I'm trying to jump to the next input field after pressing enter. This is what I've got:
var index = $('input:text').index(this);
$('input:text')[nextIndex].focus();
But it's not going to the next one..
The following code should work fine:
$("input").keypress(function(e) {
if (e.which == 13) {
var index = $("input[type='text']").index(this);
$("input[type='text']").eq(index + 1).focus();
e.preventDefault();
}
});
DEMO: http://jsfiddle.net/uJsMQ/
I'm using Cognos and I'm trying to catch the enter key so that the user's input is checked before the prompt is submitted.
Even if you don't have experience in cognos, I would appreciate it if you looked at my code :) It's pretty much a drag and drop program for business reports.
I have a Text Box Prompt on my cognos prompt page and I'm trying to set a 3 char minimum for user input. I have surrounded that Text Box Prompt with a div using HTML Items as shown below.
<div onKeyDown="return keyMon(event)"> Cognos Text Box </div>
I then have another HTML Item that contains the function keyMon(), as shown below:
<script>
function keyMon(e3)
{
var key = e3 || window.event;
if(key.keyCode == 13){
var fW = (typeof getFormWarpRequest == "function" ?
getFormWarpRequest() : document.forms["formWarpRequest"]);
if ( !fW || fW == undefined) {
fW = ( formWarpRequest_THIS_ ?
formWarpRequest_THIS_ : formWarpRequest_NS_ );
}
var custValue = fW._textEditBoxCustomerPrompt;
if(custValue.value.length > 0){
if(custValue.value.length >= 3){
promptAction('next'); //Submit the user's input
}else{
alert("Please enter a search value that is 3 or more characters long.");
return false;
}
}
}
}
</script>
As I said above, this works fine with IE. When it runs in Firefox, it picks up the Enter key, the alert box pops up as it should, but only for a millisecond and then disappears. But it still proceeds to the next page. So obviously the "return false;" isn't doing much.
Any help would be appreciated.
I managed to put a band-aid on it... Instead of returning false, I cleared out the Parameter Text Box, thus making the prompt not submit. Then I fired the alert.
If anyone has the solution to my original question, please feel free to add it because it's really bugging me.
<script>
function keyMon(e3)
{
var key = e3 || window.event;
if(key.keyCode == 13){
var fW = (typeof getFormWarpRequest == "function" ?
getFormWarpRequest() : document.forms["formWarpRequest"]);
if ( !fW || fW == undefined) {
fW = ( formWarpRequest_THIS_ ?
formWarpRequest_THIS_ : formWarpRequest_NS_ );
}
var custValue = fW._textEditBoxCustomerPrompt;
if(custValue.value.length > 0){
if(custValue.value.length >= 3){
promptAction('next'); //Submit the user's input
}else{
//Delaying the alert box so that the user's enter press will not exit the alert box.
setTimeout("alert('Please enter a search value that is 3 or more characters long.')",250);
fW._textEditBoxCustomerPrompt.value = "";
}
}
}
}
</script>