Stop automatic scrolling when the keyboard is visible in Angular

I have created a survey form where the user's name appears on top in mobile view. However, I am facing an issue with auto scroll when the keyboard pops up. I want to disable this feature to improve the user experience.

<input (click)="onFocusInput()" placeholder="" class="form-control" formControlName="name" required>

onFocusInput() {
//Method 1
window.scroll({
  top: 100,
  behavior: "smooth" // You can use "auto" instead of "smooth" for instant scrolling
});
//Method 2
// this.viewportScroller.scrollToAnchor("id1");

//Method 3
// const targetElement = document.getElementById("id1");
// if (targetElement) {
//   targetElement.scrollIntoView({
//     behavior: "smooth",
//     block: "start",
//     inline: "nearest"
//   });
// }
}

I am looking for suggestions on how to customize the scroll behavior without the keyboard triggering an auto-scroll. Any help would be highly appreciated.

cssangulartypescriptforms

Answer №1

If you're in need of the VirtualKeyboard that is typically seen on mobile devices, look no further than the documentation provided by Mozilla. In addition to instructions on how to integrate it, there's an example demonstrating overlaying the keyboard rather than adjusting viewport height:

// To check if VirtualKeyboard API is supported
if ("virtualKeyboard" in navigator) {
  navigator.virtualKeyboard.overlaysContent = true;

  navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
    const { x, y, width, height } = event.target.boundingRect;
  });
}

Keep in mind that this feature is still experimental and may not have full support on Firefox or Safari browsers yet. For more detailed examples, be sure to visit the Chrome developer site for a guide on achieving Full control with the VirtualKeyboard API.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the size of col-lg-3

Is there a way to adjust the size of my col-lg based on different screen resolutions? I'm looking for a solution that can change the size of col-lg depending on the screen resolution. For example: .col-lg-3 { /* styles for screens with 1366x768p ...

csstwitter-bootstrapbootstrap-grid

Flickity remains in plain sight on desktop devices

I am trying to hide the flickity slider on desktop and larger devices. I have followed the instructions in the documentation, but for some reason, it's not working as expected. Here is how the div looks: <div class="w-full flex pl-4 pb-16 overflo ...

javascriptcssvue.jsflickityvue-flickity

Exploring Angular: How does Number.isNaN handle non-empty strings?

Within my component, there is a dropdown menu that allows users to choose a value. Upon selecting an item from the dropdown, a function called onDropdownChange is triggered. The parameter passed to this function can either be a string ("Please select an op ...

javascriptangular

Ways to create a separator or divider between rows in a table

I'm currently working on creating a table layout and I want to include dividers similar to those seen on this website. Specifically, I am looking to have thin grey dividers between rows. I've attempted the following code, but it doesn't seem ...

htmlcss

Nest.js: initializing properties from a superclass in a controller

I have a question about unit testing controllers in the Nest.js framework. My issue is that the property from a superclass is not initialized in the controller class when creating a test module. Here is an example of the code I am referring to: export cl ...

javascripttypescripttestingjestjsnestjs

Retrieving a compilation of items found within text selected by the user on a website

Imagine a scenario in which a webpage contains the following structure: <p> <span class="1">Here's some text</span> <span class="2">that the user</span> <span class="3">could select.</span> </p> I ...

javascriptcsstextselection

Encountering an issue with reading the property 'hasError' of undefined in reactive nested forms

I recently implemented reactive nested forms using Angular 8 along with Angular Material. Inside the component.ts file: this.dataForm = this.formBuilder.group({ name: [null, Validators.required], user: this.formBuilder.group({ firstnam ...

angularangular-material

Is there a way to convert a JSON input object to a model class using TypeScript in a Node.js application?

Currently, I am developing my Node.js server using TypeScript and the express framework. Here is an example of what my controller and route looks like: export class AuthController { public async signUpNewUser(request: Request, response: Response) { ...

node.jstypescriptexpress

Why does TypeScript assign parameters in the opposite direction when assigning callbacks?

When a function is called with an argument, the argument type is matched to the parameter type. This means that the argument type must be the same as, or more specific than, the parameter type. For example: const foo = (bar: string | number) => { con ...

typescript

Avoid making the check mark disappear in an SVG animation

After perfecting my CSS animation, I have the circle looping around to complete its shape while a check mark fills in the middle with a slight delay. Once both shapes are completed simultaneously, the check mark disappears. The reason for the disappearing ...

csssvgcss-animations

Transfer highlighted checkboxes between two containers. Any deselected checkboxes in the second container should also be removed from the initial container

I have successfully populated the necessary checkboxes within a single div element. Furthermore, I have been able to save the selected checkboxes to an object. https://i.sstatic.net/Pn0pu.png I am interested in learning how to display this object (check ...

angularcheckbox

Looking to modify the styling of links in an unordered list?

Let me explain what I attempted to accomplish CSS: li:nth-child(2n) { background-color:gray; } HTML: <ul> <li><a></a></li> <li><a></a></li> <li><a></a></li> ...

htmlcss

Is it possible to externalize Angular 2 components?

Summary Can we implement a system similar to package.json for managing components in an Angular 2 application? Detailed Explanation Our application components are developed independently with their own services, constants, and internationalization strin ...

gitangulararchitecturenpm

Gap created between two td or tr elements

Can someone please help me solve a troubling issue I'm facing with my CSS and HTML code? body { background-color:#ffffff; margin:0; padding-top:0px; } table.main-table-default { margin:0 auto; background-color:#00ffff; width:700px; border-collapse:co ...

htmlcss

Can you give me some insights about what an Action Creator is?

function createRefDoneAction(widgetsArray: widget[]): WidgetAction { return { type: actionTypes.REFRESH_WIDGET_DONE, widgets: widgetsArray }; } Could you please clarify the necessity of having two sets of parameters (e.g. 'wid ...

reactjstypescript

Unusual phenomenon in ASP.NET: Adding Debug=true in the web.config file results in CSS modifications

As the question suggests: After including debug=true in my web.config file (without making any other alterations to the code), my page is displayed without a background color. Can anyone shed light on why this might be happening? ...

cssasp.netdebuggingweb-config

Completion of TypeScript code is not working as expected, the variable that is dependent upon is not

Looking for assistance with creating code completion in TypeScript. Variable.Append1 Variable.Append2 Variable.Append3 I have defined the following class: class Variable { Append1(name: string){ if (name == undefined) ...

javascripttypescriptcode-completion

`Troubleshooting form handling issues in Next.js``

Currently, I am in the process of learning React and Next.js. Initially, my page was functioning perfectly fine without the need for a UI library. However, after installing React Suite, my login form on the page stopped working and started throwing an erro ...

formsinputnext.js

Issues with CSS causing items to not line up in a single row

I'm currently working on an html/css page and trying to align the items of the agenda class in the same row, centered on the page. https://i.sstatic.net/8TjG8.png Here's the code I've been using: <html lang="en" xmlns="ht ...

htmlcss

What is the best way to paste plain text into a Textarea without any formatting?

A challenge I am facing in my project is related to copying and pasting text into a Textarea. When a user copies text, the style of the text is also inserted along with it. However, when the user manually types the text, it gets inserted correctly without ...

htmlcssreactjs