Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

226
Views
React: trigger a zoom out after a zoom in caused by input focus

There is a way to zoom out a page in React after the page was zoomed-in because an <input> got focused? Imagine a simple component like the following: I'd like to zoom out on form submit.

const Component = (props) =>{

 const handleSubmit = (e) => {
   e.preventDefault();
   //Zoom out
 }

 return(
   <form onSubmit={handleSubmit}>
      <input/>
      <button>Sign in</button>
   </form>
 );
}

Important:

I do NOT want to disable the zoom-in effect. I found that by setting viewport maximum-scale=1 or by setting font-size to 16px I can disable it [Link here], but that's not the behaviour I want for my page.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You could trigger this inside your handleSubmit() method to reset the zoom to 100%:

window.document.body.style.zoom = 1;

Note that this will not work in Firefox according to caniuse: https://caniuse.com/css-zoom

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!