Set focus to a button after last character is entered

Set focus to a button after last character is entered

  

Hi 

I have a Text box in which the user can type a string for 7 characters, I want :- 


             1) After the last character is typed - Set focus to a Button  ( Search button ) 

              2) When the Search button has focus - for its colour to be - Blue


How can I achieve the above ?

Hi,


1) jquery most probably (but UX-wise I would not recommend it at all)

2) css

Hi Omran,

As J. said you can achieve this by jquery.

I create below solution for achieving the same , please follow below step.

1. in OutSystems add a textbox and a button with "txtinput" and "btnOk" named.

2. Home page java script section add below jquery script.

SyntaxEditor Code Snippet

$(document).ready(function () {  


    $('.IsLostFocus').keyup(function(){
    
      if($('#RichWidgets_wt13_block_wtMainContent_wttxtinput').val().length ==7)
        {
             $('#RichWidgets_wt13_block_wtMainContent_wtbtnOk').css("background-color", "Blue")
        }
    });

});


3.Bind text box with jquery "IsLostFocus" class.

4. once done , publish and test the page. when you entered last 7th character , it will call class "IsLostFocus" and will trigger its css , which will become button background color blue.


Omran , I think  this would help you.. If you find it help full to you , please make as a solution.

Regards,

Rafi 


Rafi, you should not use the hardcoded ids of widgets in Javascript, as they may change (and they often do change). Use classes instead to refer to a particular widget on the screen. As a bonus, your code will be clearer.

Similarly, don't use javascript to change a particular style. Instead, just add or remove a class from the widget. This will allow you to use CSS to change the button's appearance, without interfering with the Javascript code.


This is an example of what I'm talking about:

Javascript:

$(document).ready(function () {  
  $('.IsLostFocus').keyup(function() {
    if ($('.IsLostFocus').val().length == 7) {
      $('.Button').addClass('Focused');
    }
  });
});

CSS:

.Button.Focused { background-color: blue; }


The above code can be simplified further, just by noting a few things:

  1. $(document).ready(...) can be rewritten simply as $(...) (although I concede this is a matter of taste)
  2. inside the event handler, the this keyword references the element that triggered the event
  3. the original question asked to focus an input, not just change its color
  4. to style a focused input, you can use the :focus pseudo-class in CSS


Javascript:

$(function () {  
  $('.IsLostFocus').keyup(function() {
    if ($(this).val().length == 7) {
      $('.Button').focus();
    }
  });
});

CSS:

.Button:focus { background-color: blue; }


J. wrote:

... UX-wise I would not recommend it at all


Let me clarify this, because I think it's a nice point.

Changing the focus away from the input is bad because you're assuming that the user didn't make any mistake while typing. If the user did make a mistake, his/her reaction will be to use backspace, which will not work because the focus is not in the input anymore.

Moreover, from your question I think you are just trying to submit the form when the user presses ENTER. By placing the focus on the button, you would get that behavior. But you can get the same behavior if you set the "Is Default" property of the input. By doing so, the button will be automatically clicked whenever you press ENTER inside a form input - no need to change focus or write javascript.

leonardo.fernandes wrote:

Rafi, you should not use the hardcoded ids of widgets in Javascript, as they may change (and they often do change). Use classes instead to refer to a particular widget on the screen. As a bonus, your code will be clearer.

Similarly, don't use javascript to change a particular style. Instead, just add or remove a class from the widget. This will allow you to use CSS to change the button's appearance, without interfering with the Javascript code.


This is an example of what I'm talking about:

Javascript:

$(document).ready(function () {  
  $('.IsLostFocus').keyup(function() {
    if ($('.IsLostFocus').val().length == 7) {
      $('.Button').addClass('Focused');
    }
  });
});

CSS:

.Button.Focused { background-color: blue; }


The above code can be simplified further, just by noting a few things:

  1. $(document).ready(...) can be rewritten simply as $(...) (although I concede this is a matter of taste)
  2. inside the event handler, the this keyword references the element that triggered the event
  3. the original question asked to focus an input, not just change its color
  4. to style a focused input, you can use the :focus pseudo-class in CSS


Javascript:

$(function () {  
  $('.IsLostFocus').keyup(function() {
    if ($(this).val().length == 7) {
      $('.Button').focus();
    }
  });
});

CSS:

.Button:focus { background-color: blue; }


Hi leonardo ,

Great !! Thanks for correcting it, which also help me.

I think , Now Omran has a very clear picture of implementation.

Hope it will help him.

Regards,

Rafi..



Omran Bhatti