[SOLVED] Dialog.prompt with input number or tel

Questions
1

Hi everyone, how do I create a dialog.prompt with input of type number or tel and not text, I did not see any additional parameters, do I need to create with an html same as below?

I tried it but it did not work as it should, and in the dialogue window it was not cool to look like if I did not use the placeholder, the input is hidden visually.
Tips?

    var dialog = myapp.dialog.create({
    text: '<input class="item-input" type="tel" placeholder="Enter number" required validate pattern="[0-9]*" data-error-message="Only numbers please!">',
    buttons: [{text: 'Filter'}],
       on: {
           open: function () {
            console.log("OPEN");
           }
       }
    }).open();
1 Like
2

This is the code for default prompt dialog which you can use for reference https://github.com/framework7io/framework7/blob/master/src/core/components/dialog/dialog.js#L59-L80

         new Dialog(app, {
            title: typeof title === 'undefined' ? defaultDialogTitle : title,
            text,
            content: '<div class="dialog-input-field item-input"><div class="item-input-wrap"><input type="text" class="dialog-input"></div></div>',
            buttons: [
              {
                text: app.params.dialog.buttonCancel,
                keyCodes: keyboardActions ? [27] : null,
              },
              {
                text: app.params.dialog.buttonOk,
                bold: true,
                keyCodes: keyboardActions ? [13] : null,
              },
            ],
            onClick(dialog, index) {
              const inputValue = dialog.$el.find('.dialog-input').val();
              if (index === 0 && callbackCancel) callbackCancel(inputValue);
              if (index === 1 && callbackOk) callbackOk(inputValue);
            },
            destroyOnClose,
          }).open()
2 Likes
3

Solved, I did not pass the “content” with the standard F7, so it is very dynamic, I will leave the example below working on Android and IOS mobile devices.
Thanks @nolimits4web

var dialog = myapp.dialog.create({
    title: 'My custom dialog',
    text: 'Custom dialog with input number or tel and validation',
    content: '<div class="dialog-input-field item-input"><div class="item-input-wrap"><input class="dialog-input" type="tel" placeholder="Enter number" required validate pattern="[0-9]*" data-error-message="Only numbers please!"></div></div>',
    buttons: [{text: 'Filter'}],
    onClick: function (dialog, index) {
        console.log(dialog.$el.find('.dialog-input').val());
    },
    on: {
        open: function () {
            console.log("OPEN");
        }
    }
}).open();
2 Likes
4

thank you for your example, it was very useful!

1 Like