How to call onChange event after pressing Enter key

0 votes

I am new to Bootstrap and stuck with this problem. I have an input field and as soon as I enter just one digit, the function from onChange is called, but I want it to be called when I push 'Enter when the whole number has been entered. The same problem for the validation function - it calls too soon.

var inputProcent = React.CreateElement(bootstrap.Input, {type: "text",
  //bsStyle: this.validationInputFactor(),
  placeholder: this.initialFactor,
  className: "input-block-level",
  onChange: this.handleInput,
  block: true,
  addonBefore: '%',
  ref:'input',
  hasFeedback: true
});
Oct 7, 2020 in Java-Script by kartik
• 37,510 points
10,594 views

1 answer to this question.

0 votes

Hello @kartik,

You can use onKeyPress directly on input field. onChange function changes state value on every input field change and after Enter is pressed it will call a function search().

<input
    type="text"
    placeholder="Search..."
    onChange={event => {this.setState({query: event.target.value})}}
    onKeyPress={event => {
                if (event.key === 'Enter') {
                  this.search()
                }
              }}
/>

Hope it helps!!
Thank you!!

answered Oct 7, 2020 by anonymous
• 82,880 points

Related Questions In Java-Script

0 votes
1 answer

How to call jQuery UI Dialog with ASP.NET button postback?

Hello @kartik, To solve the problem with ASP:Button ...READ MORE

answered Apr 28, 2020 in Java-Script by Niroj
• 82,880 points
3,071 views
0 votes
1 answer

How to change url after success in ajax without page reload?

Hello @kartik, Use the browser history to change ...READ MORE

answered Apr 29, 2020 in Java-Script by Niroj
• 82,880 points
9,292 views
0 votes
1 answer

How to select and manipulate CSS pseudo-elements such as ::before and ::after using jQuery?

Hii @kartik, Here is the way to access ...READ MORE

answered May 18, 2020 in Java-Script by Niroj
• 82,880 points
5,986 views
0 votes
1 answer

How to do API call in react js?

Hello, Use fetch method inside componentDidMount to update state: componentDidMount(){ fetch('https://dey.me/api/') ...READ MORE

answered May 18, 2020 in Java-Script by Niroj
• 82,880 points
1,911 views
0 votes
1 answer

How to access PHP var from external javascript file?

Hello @kartik, You don't really access it, you ...READ MORE

answered Jul 6, 2020 in Java-Script by Niroj
• 82,880 points
7,113 views
0 votes
1 answer

How do I escape a single quote in SQL Server?

Hello @kartik, Single quotes are escaped by doubling ...READ MORE

answered Jul 21, 2020 in PHP by Niroj
• 82,880 points
5,842 views
0 votes
1 answer

How to specify a port to run a create-react-app based project?

Hello @kartik, You could use cross-env to set the port, ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,880 points
5,273 views
0 votes
1 answer

How do you set a default value for a MySQL Datetime column?

Hello @kartik, In version 5.6.5, it is possible ...READ MORE

answered Aug 18, 2020 in PHP by Niroj
• 82,880 points
7,342 views
0 votes
1 answer

How to manage a redirect request after a jQuery Ajax call?

Hii kartik, You can resolved this issue like ...READ MORE

answered Apr 27, 2020 in Java-Script by Niroj
• 82,880 points
28,091 views
0 votes
1 answer

How to manage a redirect request after a jQuery Ajax call?

Hii, You can solved this issue by: Adding a ...READ MORE

answered Jun 18, 2020 in Java-Script by Niroj
• 82,880 points
3,177 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP