Input fields not working on Windows Phone

[tommyno]

Input fields on Windows Phone stops working when using this plugin in forced mode. User is unable to write text to input fields.

Tested on: Nokia Lumia 930 and Nokia Lumia 1520

Anyways, thanks for a great plugin! It saved me a lot of time on my latest project.

[w0rm]

@tommyno hi! Unfortunately I don't have Windows Phone, but if you're able to track it down and fix it, then PR is very welcome.

[tommyno]

Hi, unfortunately I don't have access to any Windows Phones either. It was discovered by the client.

Just wanted to write a short notice in case someone was having the same issue.

I made a short workaround to disable the plugin for Windows Phone (which do support the placeholder-attribute natively):

var isWindowsPhone = false;
if(navigator.userAgent.match(/iemobile/i)) {isWindowsPhone = true;}

if (!windowsPhone) {
    $('[placeholder]').placeholder({"force": true, "className" : "placeholder-styled"});
}

[w0rm]

Yeah, lets just keep this issue open so people will be aware of it.

[ramonrovirosa]

Hi @w0rm & @tommyno I was having the same issue with the input field not working on Windows Phone.

Looks like the issue is inside of the hide function as windows phone doesn't like this.$element[0].value = '' having an empty string value and was not appending the value to the element when the user clicked on the keyboard

I came up with a quick solution & will take a look when I have some more time. Works on windows phone now:

if(navigator.userAgent.match(/iemobile/i)){
       this.$element[0].value = e.shiftKey ? String.fromCharCode(e.keyCode) : String.fromCharCode(e.keyCode).toLowerCase();
}

All together, the new hide function looks like such:

hide: function (e) {
            var isActiveElement = this.$replacement.is(':focus')
            if (this.isHidden) return;
            if (!e || !(e.shiftKey && e.keyCode === 16) && e.keyCode !== 9) {
                this.isHidden = true
                if (this.isPassword) {
                    this.$replacement.before(this.$element.show()).hide()
                    if (isActiveElement) this.$element.focus()
                    if(navigator.userAgent.match(/iemobile/i)){
                        this.$element[0].value = e.shiftKey ? String.fromCharCode(e.keyCode) : String.fromCharCode(e.keyCode).toLowerCase();
                    }
                } else {
                    this.$element[0].value = ''
                    if(navigator.userAgent.match(/iemobile/i)){
                        this.$element[0].value = e.shiftKey ? String.fromCharCode(e.keyCode) : String.fromCharCode(e.keyCode).toLowerCase();
                    }
                    this.$element.removeClass(this.options.className)
                }
            }
        }

[w0rm]

@ramonrovirosa thanks, feel free to open PR if your fix is proven to work.