diff --git a/jslib b/jslib
index 10b9e9c2d6f..df1649bac15 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 10b9e9c2d6fae90af6c481741830a92ba9d986b3
+Subproject commit df1649bac151ccb7a00244a3633f5ba3adf178a8
diff --git a/src/popup/accounts/environment.component.html b/src/popup/accounts/environment.component.html
index cbd543abe26..d0ea49d81e9 100644
--- a/src/popup/accounts/environment.component.html
+++ b/src/popup/accounts/environment.component.html
@@ -22,7 +22,7 @@
                 <div class="box-content-row" appBoxRow>
                     <label for="baseUrl">{{'baseUrl' | i18n}}</label>
                     <input id="baseUrl" type="text" name="BaseUrl" [(ngModel)]="baseUrl"
-                           placeholder="ex. https://bitwarden.company.com">
+                           placeholder="ex. https://bitwarden.company.com" appInputVerbatim>
                 </div>
             </div>
             <div class="box-footer">
@@ -36,19 +36,22 @@
             <div class="box-content" [hidden]="!showCustom">
                 <div class="box-content-row" appBoxRow>
                     <label for="webVaultUrl">{{'webVaultUrl' | i18n}}</label>
-                    <input id="webVaultUrl" type="text" name="WebVaultUrl" [(ngModel)]="webVaultUrl">
+                    <input id="webVaultUrl" type="text" name="WebVaultUrl" [(ngModel)]="webVaultUrl" inputmode="url"
+                           appInputVerbatim>
                 </div>
                 <div class="box-content-row" appBoxRow>
                     <label for="apiUrl">{{'apiUrl' | i18n}}</label>
-                    <input id="apiUrl" type="text" name="ApiUrl" [(ngModel)]="apiUrl">
+                    <input id="apiUrl" type="text" name="ApiUrl" [(ngModel)]="apiUrl" inputmode="url" appInputVerbatim>
                 </div>
                 <div class="box-content-row" appBoxRow>
                     <label for="identityUrl">{{'identityUrl' | i18n}}</label>
-                    <input id="identityUrl" type="text" name="IdentityUrl" [(ngModel)]="identityUrl">
+                    <input id="identityUrl" type="text" name="IdentityUrl" [(ngModel)]="identityUrl" inputmode="url"
+                           appInputVerbatim>
                 </div>
                 <div class="box-content-row" appBoxRow>
                     <label for="iconsUrl">{{'iconsUrl' | i18n}}</label>
-                    <input id="iconsUrl" type="text" name="IconsUrl" [(ngModel)]="iconsUrl">
+                    <input id="iconsUrl" type="text" name="IconsUrl" [(ngModel)]="iconsUrl" inputmode="url"
+                           appInputVerbatim>
                 </div>
             </div>
             <div class="box-footer" [hidden]="!showCustom">
diff --git a/src/popup/accounts/hint.component.html b/src/popup/accounts/hint.component.html
index af69c6d32db..74cd8e246b3 100644
--- a/src/popup/accounts/hint.component.html
+++ b/src/popup/accounts/hint.component.html
@@ -18,7 +18,8 @@
             <div class="box-content">
                 <div class="box-content-row" appBoxRow>
                     <label for="email">{{'emailAddress' | i18n}}</label>
-                    <input id="email" type="text" name="Email" [(ngModel)]="email" required appAutofocus>
+                    <input id="email" type="text" name="Email" [(ngModel)]="email" required appAutofocus
+                           appInputVerbatim="false">
                 </div>
             </div>
             <div class="box-footer">
diff --git a/src/popup/accounts/lock.component.html b/src/popup/accounts/lock.component.html
index f4be5c8f1a3..7cd46d44b6a 100644
--- a/src/popup/accounts/lock.component.html
+++ b/src/popup/accounts/lock.component.html
@@ -15,7 +15,7 @@
                     <div class="row-main">
                         <label for="masterPassword">{{'masterPass' | i18n}}</label>
                         <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
-                               class="monospaced" [(ngModel)]="masterPassword" required>
+                               class="monospaced" [(ngModel)]="masterPassword" required appInputVerbatim>
                     </div>
                     <div class="action-buttons">
                         <a class="row-btn" href="#" appStopClick appBlurClick
diff --git a/src/popup/accounts/login.component.html b/src/popup/accounts/login.component.html
index b88b1c65d36..e97d35d3e04 100644
--- a/src/popup/accounts/login.component.html
+++ b/src/popup/accounts/login.component.html
@@ -19,13 +19,14 @@
                 <div class="box-content-row" appBoxRow>
                     <label for="email">{{'emailAddress' | i18n}}</label>
                     <input id="email" type="text" name="Email" [(ngModel)]="email" required
-                           [appAutofocus]="email === ''">
+                           [appAutofocus]="email === ''" inputmode="email" appInputVerbatim="false">
                 </div>
                 <div class="box-content-row box-content-row-flex" appBoxRow>
                     <div class="row-main">
                         <label for="masterPassword">{{'masterPass' | i18n}}</label>
                         <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
-                               class="monospaced" [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''">
+                               class="monospaced" [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''"
+                               appInputVerbatim>
                     </div>
                     <div class="action-buttons">
                         <a class="row-btn" href="#" appStopClick appBlurClick
diff --git a/src/popup/accounts/register.component.html b/src/popup/accounts/register.component.html
index fcb9d4e1c7b..db6f2ecfa3f 100644
--- a/src/popup/accounts/register.component.html
+++ b/src/popup/accounts/register.component.html
@@ -19,13 +19,14 @@
                 <div class="box-content-row" appBoxRow>
                     <label for="email">{{'emailAddress' | i18n}}</label>
                     <input id="email" type="text" name="Email" [(ngModel)]="email" required
-                           [appAutofocus]="email === ''">
+                           [appAutofocus]="email === ''" inputmode="email" appInputVerbatim="false">
                 </div>
                 <div class="box-content-row box-content-row-flex" appBoxRow>
                     <div class="row-main">
                         <label for="masterPassword">{{'masterPass' | i18n}}</label>
                         <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
-                               class="monospaced" [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''">
+                               class="monospaced" [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''"
+                               appInputVerbatim>
                     </div>
                     <div class="action-buttons">
                         <a class="row-btn" href="#" appStopClick appBlurClick
@@ -47,7 +48,7 @@
                         <label for="masterPasswordRetype">{{'reTypeMasterPass' | i18n}}</label>
                         <input id="masterPasswordRetype" type="{{showPassword ? 'text' : 'password'}}"
                                name="MasterPasswordRetype" class="monospaced" [(ngModel)]="confirmMasterPassword"
-                               required>
+                               required appInputVerbatim>
                     </div>
                     <div class="action-buttons">
                         <a class="row-btn" href="#" appStopClick appBlurClick
diff --git a/src/popup/accounts/two-factor.component.html b/src/popup/accounts/two-factor.component.html
index e2ef2954904..af3c11a3847 100644
--- a/src/popup/accounts/two-factor.component.html
+++ b/src/popup/accounts/two-factor.component.html
@@ -30,7 +30,8 @@
                 <div class="box-content">
                     <div class="box-content-row" appBoxRow>
                         <label for="code">{{'verificationCode' | i18n}}</label>
-                        <input id="code" type="text" name="Code" [(ngModel)]="token" required appAutofocus>
+                        <input id="code" type="text" name="Code" [(ngModel)]="token" required appAutofocus
+                               inputmode="tel" appInputVerbatim>
                     </div>
                     <div class="box-content-row box-content-row-checkbox" appBoxRow>
                         <label for="remember">{{'rememberMe' | i18n}}</label>
@@ -48,7 +49,8 @@
                 <div class="box-content">
                     <div class="box-content-row" appBoxRow>
                         <label for="code" class="sr-only">{{'verificationCode' | i18n}}</label>
-                        <input id="code" type="password" name="Code" [(ngModel)]="token" required appAutofocus>
+                        <input id="code" type="password" name="Code" [(ngModel)]="token" required appAutofocus
+                               appInputVerbatim>
                     </div>
                     <div class="box-content-row box-content-row-checkbox" appBoxRow>
                         <label for="remember">{{'rememberMe' | i18n}}</label>
diff --git a/src/popup/app.module.ts b/src/popup/app.module.ts
index 568af3cad22..d0c32dd3a49 100644
--- a/src/popup/app.module.ts
+++ b/src/popup/app.module.ts
@@ -46,6 +46,7 @@ import { AutofocusDirective } from 'jslib/angular/directives/autofocus.directive
 import { BlurClickDirective } from 'jslib/angular/directives/blur-click.directive';
 import { BoxRowDirective } from 'jslib/angular/directives/box-row.directive';
 import { FallbackSrcDirective } from 'jslib/angular/directives/fallback-src.directive';
+import { InputVerbatimDirective } from 'jslib/angular/directives/input-verbatim.directive';
 import { StopClickDirective } from 'jslib/angular/directives/stop-click.directive';
 import { StopPropDirective } from 'jslib/angular/directives/stop-prop.directive';
 
@@ -95,6 +96,7 @@ import { IconComponent } from 'jslib/angular/components/icon.component';
         HintComponent,
         I18nPipe,
         IconComponent,
+        InputVerbatimDirective,
         LockComponent,
         LoginComponent,
         OptionsComponent,
diff --git a/src/popup/vault/add-edit.component.html b/src/popup/vault/add-edit.component.html
index 205cef60f74..3733bed823f 100644
--- a/src/popup/vault/add-edit.component.html
+++ b/src/popup/vault/add-edit.component.html
@@ -34,14 +34,14 @@
                     <div class="box-content-row" appBoxRow>
                         <label for="loginUsername">{{'username' | i18n}}</label>
                         <input id="loginUsername" type="text" name="Login.Username"
-                               [(ngModel)]="cipher.login.username">
+                               [(ngModel)]="cipher.login.username" inputmode="email" appInputVerbatim>
                     </div>
                     <div class="box-content-row box-content-row-flex" appBoxRow>
                         <div class="row-main">
                             <label for="loginPassword">{{'password' | i18n}}</label>
                             <input id="loginPassword" class="monospaced"
                                    type="{{showPassword ? 'text' : 'password'}}" name="Login.Password"
-                                   [(ngModel)]="cipher.login.password">
+                                   [(ngModel)]="cipher.login.password" appInputVerbatim>
                         </div>
                         <div class="action-buttons">
                             <button type="button" #checkPasswordBtn class="row-btn btn" appBlurClick
@@ -65,7 +65,7 @@
                     <div class="box-content-row" appBoxRow>
                         <label for="loginTotp">{{'authenticatorKeyTotp' | i18n}}</label>
                         <input id="loginTotp" type="text" name="Login.Totp" class="monospaced"
-                               [(ngModel)]="cipher.login.totp">
+                               [(ngModel)]="cipher.login.totp" appInputVerbatim>
                     </div>
                 </div>
                 <!-- Card -->
@@ -77,7 +77,8 @@
                     </div>
                     <div class="box-content-row" appBoxRow>
                         <label for="cardNumber">{{'number' | i18n}}</label>
-                        <input id="cardNumber" type="text" name="Card.Number" [(ngModel)]="cipher.card.number">
+                        <input id="cardNumber" type="text" name="Card.Number" [(ngModel)]="cipher.card.number"
+                               appInputVerbatim>
                     </div>
                     <div class="box-content-row" appBoxRow>
                         <label for="cardBrand">{{'brand' | i18n}}</label>
@@ -98,7 +99,8 @@
                     </div>
                     <div class="box-content-row" appBoxRow>
                         <label for="cardCode">{{'securityCode' | i18n}}</label>
-                        <input id="cardCode" type="text" name="Card.Code" [(ngModel)]="cipher.card.code">
+                        <input id="cardCode" type="text" name="Card.Code" [(ngModel)]="cipher.card.code"
+                               appInputVerbatim>
                     </div>
                 </div>
                 <!-- Identity -->
@@ -127,7 +129,7 @@
                     <div class="box-content-row" appBoxRow>
                         <label for="idUsername">{{'username' | i18n}}</label>
                         <input id="idUsername" type="text" name="Identity.Username"
-                               [(ngModel)]="cipher.identity.username">
+                               [(ngModel)]="cipher.identity.username" appInputVerbatim>
                     </div>
                     <div class="box-content-row" appBoxRow>
                         <label for="idCompany">{{'company' | i18n}}</label>
@@ -136,21 +138,23 @@
                     </div>
                     <div class="box-content-row" appBoxRow>
                         <label for="idSsn">{{'ssn' | i18n}}</label>
-                        <input id="idSsn" type="text" name="Identity.SSN" [(ngModel)]="cipher.identity.ssn">
+                        <input id="idSsn" type="text" name="Identity.SSN" [(ngModel)]="cipher.identity.ssn"
+                               appInputVerbatim>
                     </div>
                     <div class="box-content-row" appBoxRow>
                         <label for="idPassportNumber">{{'passportNumber' | i18n}}</label>
                         <input id="idPassportNumber" type="text" name="Identity.PassportNumber"
-                               [(ngModel)]="cipher.identity.passportNumber">
+                               [(ngModel)]="cipher.identity.passportNumber" appInputVerbatim>
                     </div>
                     <div class="box-content-row" appBoxRow>
                         <label for="idLicenseNumber">{{'licenseNumber' | i18n}}</label>
                         <input id="idLicenseNumber" type="text" name="Identity.LicenseNumber"
-                               [(ngModel)]="cipher.identity.licenseNumber">
+                               [(ngModel)]="cipher.identity.licenseNumber" appInputVerbatim>
                     </div>
                     <div class="box-content-row" appBoxRow>
                         <label for="idEmail">{{'email' | i18n}}</label>
-                        <input id="idEmail" type="text" name="Identity.Email" [(ngModel)]="cipher.identity.email">
+                        <input id="idEmail" type="text" name="Identity.Email" [(ngModel)]="cipher.identity.email"
+                               appInputVerbatim>
                     </div>
                     <div class="box-content-row" appBoxRow>
                         <label for="idPhone">{{'phone' | i18n}}</label>
@@ -203,7 +207,8 @@
                         <div class="row-main">
                             <label for="loginUri{{i}}">{{'uriPosition' | i18n : (i + 1)}}</label>
                             <input id="loginUri{{i}}" type="text" name="Login.Uris[{{i}}].Uri" [(ngModel)]="u.uri"
-                                   placeholder="{{'ex' | i18n}} https://google.com">
+                                   placeholder="{{'ex' | i18n}} https://google.com" inputmode="url"
+                                   appInputVerbatim>
                             <label for="loginUriMatch{{i}}" class="sr-only">
                                 {{'matchDetection' | i18n}} {{(i + 1)}}
                             </label>
@@ -272,11 +277,11 @@
                         <label for="fieldValue{{i}}" class="sr-only">{{'value' | i18n}}</label>
                         <div class="row-main">
                             <input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
-                                   class="row-label" placeholder="{{'name' | i18n}}">
+                                   class="row-label" placeholder="{{'name' | i18n}}" appInputVerbatim>
                             <input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value"
-                                   *ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}">
+                                   *ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}" appInputVerbatim>
                             <input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}"
-                                   name="Field.Value{{i}}" [(ngModel)]="f.value" class="monospaced"
+                                   name="Field.Value{{i}}" [(ngModel)]="f.value" class="monospaced" appInputVerbatim
                                    *ngIf="f.type === fieldType.Hidden" placeholder="{{'value' | i18n}}">
                         </div>
                         <input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox"