Configurable Input Type for Text Input

[DanDiplo]

I love the ability to prepend and append icons to the Text Input datatype - it works really well for when you are looking to input (say) an email address or an external URL, as you can use the icon and placeholder to indicate this. But what is missing is the ability to change the HTML input type - it is always <input type="text">. It would be a nice enhancement if you could select from a list of common HTML input types, namely text, email, url, tel (and maybe time).

I threw together an example in code which I'm happy to submit as a PR. So in the configuration editor you can select the type from a dropdown (with text as the default). In the example below I've set it as type email:

The nice thing is that this automatically triggers Umbraco validation, so if you set it to email but it's not valid then you can't submit it:

This also works for the other types, so if you set it to url then you have to enter a valid URL etc.

If you like the idea then I've got the core code working and can submit it as a PR (or just add it yourself as it's not much code!).

I think it should be backward compatible as it will default to text for previous instances. But you might be able to judge that better than me.

Example:

            {
                Key = "inputType",
                Name = "Input type",
                Description = "Select the input type.",
                View = ioHelper.ResolveRelativeOrVirtualUrl(DropdownListDataListEditor.DataEditorViewPath),
                Config = new Dictionary<string, object>
                {
                    { DropdownListDataListEditor.AllowEmpty, Constants.Values.False },
                    { Constants.Conventions.ConfigurationFieldAliases.Items, new DataListItem[]
                    {
                        new DataListItem()
                        {
                            Name = "Text", Value = "text"
                        },
                        new DataListItem()
                        {
                            Name = "Email", Value = "email"
                        },
                        new DataListItem()
                        {
                            Name = "Telephone", Value = "tel"
                        },
                        new DataListItem()
                        {
                            Name = "URL", Value = "url"
                        }
                    } },
                }
            });

[leekelleher]

Thanks @DanDiplo. I think it's a great idea. If you're happy to do a PR, that'd be ace.

[leekelleher]

Closing discussion... feature added by @DanDiplo in #233 (for Contentment v4.1.0) 🙏