CODEWITHSUNDEEP
javascriptcharacter-encodingformsdiacritics
Sammy
Sammy

Reputation: 1218

Convert html-input to proper encoding

I have a html-form with one html-input-field. The input is copied via clipboard from other programs. Sometimes the copied text is not utf-8, but ansi (tested with notepad++). Than, umlauts like ü are copied as ü. As I don't want to change the encoding of the clipboard-text everytime (with i.e.notepad++), I would like to do this with javascript directly when parsing and spliting the input-text.

Is there a way to do this without implementing an own function for this (which would be the next thing I would do for the most common umlauts)?

Upvotes: 0

Views: 1494

Answers (1)

briosheje
briosheje

Reputation: 7446

Stealing from the internet this:

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/geral/utf-8 [rev. #1]

var UTF8 = {
    encode: function(s){
        for(var c, i = -1, l = (s = s.split("")).length, o = String.fromCharCode; ++i < l;
            s[i] = (c = s[i].charCodeAt(0)) >= 127 ? o(0xc0 | (c >>> 6)) + o(0x80 | (c & 0x3f)) : s[i]
        );
        return s.join("");
    },
    decode: function(s){
        for(var a, b, i = -1, l = (s = s.split("")).length, o = String.fromCharCode, c = "charCodeAt"; ++i < l;
            ((a = s[i][c](0)) & 0x80) &&
            (s[i] = (a & 0xfc) == 0xc0 && ((b = s[i + 1][c](0)) & 0xc0) == 0x80 ?
            o(((a & 0x03) << 6) + (b & 0x3f)) : o(128), s[++i] = "")
        );
        return s.join("");
    }
};

You can then add your input:

<input type="text" id="test">

And listen to the PASTE event and, after a few milliseconds (else you will get "" as .val), you can replace the entire value of the input with the decoded one:

$('#test').on('paste', function(e) {
  var controller = $(this);
  setTimeout(function(){
    controller.val(UTF8.decode(controller.val()));
  },10);
});

Codepen:

http://codepen.io/anon/pen/GgYZeb

Please note that it is only listening to the PASTE event. You can also add other events if you're interested.

Upvotes: 3

Related Questions