Generate a tag in Ionic when the user hits the go/enter key on the keyboard

I have developed a mobile app that allows users to search for specific items. Currently, when the user presses Space, it creates a tag. However, I want the tag to be created when the user presses go/search/enter on the mobile keyboard instead of spacebar.

Currently, the code below functions by creating the tag when it encounters a " ". This needs to be modified because some items consist of two words like Chia Seeds.

  constructor(public keyboard: Keyboard, public formBuilder: FormBuilder, public navCtrl: NavController, public navParams: NavParams, public apiAuthentication: ApiAuthentication, private http: Http) {
    this.tags = [];
    this.myForm = this.formBuilder.group({
      tags: ['']
    });
    this.myForm.get('tags')
      .valueChanges
      .subscribe((value: string) => {
        if(value.indexOf(' ') > -1) {
          let newTag = value.split(' ')[0];
          console.log(newTag);
          if(newTag) {
            this.tags.push(newTag);
            this.myForm.get('tags').setValue('');
          }
          this.searchRecipeDB(this.tags);
        }
      });
    }

I am unsure about how to make the go/enter button function on mobile devices, so any help with that would be much appreciated.

Thank you,

javascriptangulartypescriptionic-frameworkionic2

Answer №1

If you are utilizing ion-input or ion-textarea, you have the option to monitor keypress events:

<ion-input (keypress)="onPress($event.which) ... >

In your .ts file:

onPress(keyCode: number): void {
 if(keyCode === 13) { 
   // The keyCode for return/go/enter is 13 (iPhone's)
   doWhateverYouWant();
 }
}

You can find other keyCodes here.

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

I am seeking assistance with generating a printed list from the database

Struggling for two full days to successfully print a simple list from the database. Take a look at the current state of the code: function CategoriesTable() { const [isLoading, setLoading] = useState(true); let item_list = []; let print_list; useEffect(( ...

javascriptreactjsaxiosuse-state

Guide to activating a function by tapping anywhere on a webpage in iPhone Safari

I am attempting to implement a jQuery function that will change the text of a div in the iPhone browser when any area of the page is clicked. Here is my current setup: <div id="alternative_text">traduit</div> <script type="text/javascript ...

javascriptjqueryiphonesafariwebview

The program encountered an error while trying to access the 'username' property, as it was undefined

I've been working on implementing user associations for the /campgrounds section, but encountered this error unexpectedly Cannot read property 'username' of undefined at eval (C:\Users\karan\Desktop\YelpCamp\V9&b ...

javascriptnode.jsmongodbexpressejs

Understanding the significance of emitDecoratorMetadata in transpiled code

I have a question regarding the significance of the emitDecoratorMetadata option when transpiling TypeScript to JavaScript in an Angular 2 environment. If this option is set to false, and metadata is not included in the final code, what impact will it ha ...

angulartypescriptdecorator

I'm trying to figure out how to incorporate this code into an arrow function while also utilizing the iterating array element

I am aiming to create a function that can provide either true or false based on whether the searchElement exists in the array. While I could achieve this with a simple for loop and if-else statement, my goal is to utilize an arrow function. Although JavaS ...

javascriptarraysfilterarrow-functions

Navigating to a different page in Ionic 2 when a link or button is clicked

When I click on the link provided below, it should take me to the home page. However, I am facing issues and it is not redirecting me as expected. I want to be taken to the home page when clicking on the specified link or button. Do I need to add any Ang ...

htmlangularionic2

What could be causing the lack of updates in my shared service across all components?

I have implemented an Angular2 app where I am initializing an authentication service called LocalStorage which I want to be accessible across all my components: bootstrap(AppComponent, [ ROUTER_PROVIDERS, LocalStorage ]); The definition of the Lo ...

javascriptdependency-injectiontypescriptangularsharedservices

Navigational highlighting of current page section on a one-page website

I'm struggling with adding a navigation bar feature that will highlight the current section being viewed on my website. All I want is for the currently viewed section to appear bold in the navigation bar. Check out the codepen link: HTML <na ...

javascriptjqueryhtmlcss

What steps can be taken to avoid being logged out automatically upon clicking the back button?

Currently, my code automatically logs out of the application when the browser is closed. However, I am facing an issue where it also logs out when I press the browser's back button and navigate to another page. I would like the code to only logout au ...

javascriptphpjquerycodeigniter

Why aren't variables showing up on the right when using writeFileSync in Node.js?

I'm attempting to insert a variable as ${Y} but instead of getting the actual data in Y, my output is showing (how can I write variable ${Y}). Does anyone have a solution for this? const fs = require('fs'); const Y = fs.readFileSync('./ ...

javascriptnode.js

Building a custom React carousel using visibility logic starting from the ground up

Can anyone explain the logic or algorithm behind a Carousel? I have been researching how to display one item at a time, but in my case, I need to display three items. When I click on next, I want the first item to hide and the fourth item to appear. <di ...

javascriptreactjs

On the first load, Next.js retrieves a token from an API and saves it for later use

Currently working on an application with next.js, the challenge lies in retrieving a guest token from an API and storing it in a cookie for use throughout the entire application. My goal is to have this token set in the cookie before any page is loaded. H ...

javascriptnode.jsreactjsnext.jsserver-side-rendering

Previewing a webpage on npm using Angular

I am currently attempting to integrate the following package into my project npm install webpage-preview. However, I am unsure of where to place this code as the webpagePreview is showing as undefined. Could it be that this is exclusively for AngularJS o ...

angular

jQuery button click event not registering

Confused by what should be a simple solution, I find myself struggling to figure it out at the moment. All I have is this button: <button id="logout" type="button">Logout</button> It's meant to trigger this jQuery code enclosed in script ...

javascriptjquery

The ng-class condition is shifting, yet the classes are not being updated

I am encountering a peculiar issue. I need to assign an active class to the appropriate <li> element when $scope.selectedCat == cat.id. The list is dynamically generated using ng-repeat. If selectedCat is false, the 'Browse All Categories' ...

javascriptangularjsng-class

Tips for simulating the getCustomRepository function in typeORM

I am facing a challenge in unit-testing a class that has a getCustomRepository method in its constructor. I'm struggling to find an easy way to mock it. Below is the code for my class: import {getCustomRepository} from 'typeorm'; export cl ...

node.jstypescriptunit-testingjestjstypeorm

Issue encountered with the "angular 2-google-chart" plugin

Looking to incorporate the " angular2-google-chart" module in my project. However, upon starting the application, I encounter the following error: ERROR in ./node_modules/angular2-google-chart/directives/angular2-google-chart.directive.ts Module bu ...

angulartypescript

Tips for inserting a logo in the center of a QR code using Node.js

I'm currently working on designing a logo and attempting to incorporate it into the center of a QR code. While I've been successful in generating the QR code, I'm facing challenges in getting the logo to appear in the middle. I've tried ...

javascriptnode.jsqr-code

Typeorm issue: Foreign key insertion not functioning correctly with cascade enabled

I currently have a situation where I am dealing with 2 entities that have a ManyToOne/OneToMany Relation with cascade enabled. < One: Sender ---- Many: Transfer (cascade insert) > My goal is to add 2 new Transfer instances with the same sender. How ...

typescripttypeorm

The outerHeight of Elements measured in pixels

Is there a way to increase the outerHeight() function by adding extra pixels? Let's say we have a variable storing the outerHeight of .pg-sect: var $section = $('.pg-sect').outerHeight(); Now, if I want to add an additional 70px to the he ...

javascriptjqueryhtmlcss