How to Have a Masked Numeric Input Field

Is there a way to have a masked numeric input field?

If it's only required to work in WebKit based browsers, and CSS is allowed in 'purely through HTML5', you could try:

input[type=number] {
    -webkit-text-security: disc;
}

I'm not sure if there's currently any equivalent for other browsers, in the future this may be controllable through the appearance CSS property. The CSS3 version of appearance has been dropped from the spec, so it looks like you'll have to wait for the standardization of text-security for a cross browser solution.

How to apply masking to numeric field with a trailing character

Did you really mean to just add a character?

var x = number + 'x';

If you meant to mask the last one you can do

var x = number.substring(0, number.length - 1) + 'x';

How to create number mask using type number?

It's unsurprising that HTML type="number" doesn't work for a phone#.

You really have two separate problems:

1. You'd like to validate a phone# input field. A regex could be a good solution.

2. You'd also like to filter out invalid characters as the user fills out the input field.

There are many options; each with its own pros/cons.

For starters, you might consider using <input type="tel">

Here are several other ideas to consider:

• How to force Input field to enter numbers only using JavaScript ?
• JavaScript: HTML Form - Phone Number validation

Input mask for numeric and decimal

You can use jquery numeric for numbers.

The current version does allow what you're looking for but someone has changed the code a little bit and it works:

HTML

<input class="numeric" type="text" />

JQuery

$(".numeric").numeric({ decimal : ".",  negative : false, scale: 3 });

This is the whole source.

And I've prepared this fiddle so you can see how it works.

How do I apply a numeric input mask to a UITextField in Objective-c

You use the

- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string`

delegate method. In the method look at what the string currently is (textField.text), what it will be after applying the replacement string, then create your own formatted string and set it using textField.text = "20,000.50" etc. Return NO since you handled the text.

Is it possible to create a text field phone number mask which is not disappearing when user inputs, in flutter?

Stack 2 TextFields one for the hint and one for the user input and remove the string in hint when the user inputs some values like this

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController hintController = TextEditingController();
  static String hintVal = "987654321";
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    hintController.text = hintVal;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Stack(
        children: [
          IgnorePointer(
            child: TextField(
              controller: hintController,
              style: TextStyle(color: Colors.grey),
            ),
          ),
          TextField(
            onChanged: (val) {
              String newHint = "";
              for (int i = 0; i < hintVal.length; i++) {
                if (i < val.length) {
                  newHint += val[i];
                } else {
                  newHint += hintVal[i];
                }
              }
              hintController.text = newHint;
            },
          ),
        ],
      )),
    );
  }
}

How to create input mask in text field of flutter

For input format you should use TextFormField with TextInputFormatter. Have you tried that?

A nice article about this can be found here. It also contains links to flutter API for more in-depth configurations.

Mask integer in Read-Only input field in AngularJs?

With slice and replace, you can achieve what you want:

var orig = scope.ngModel;
    var edited = orig;
    scope.ngModel = edited.slice(4).replace(/\d/g, 'x') + edited.slice(-4);

Check out this similar Plunker.

---

Related Topics