Real time input formatting - jQuery

Replace specific characters in inputting text

by akalankaimesh

HTML

<input type="text" placeholeder="please enter some text" id="product_name">
<input type="text" placeholeder="please enter some text" id="product_slug">

JavaScript

$.fn.fromatInput = function (x) {
        var currentInput = $(this);
        var formatTxt = "";

        function main() {
            formatTxt = currentInput.val();
            for(var i=0; i<x.replaceChar.length; i++){
                formatTxt = formatTxt.split(x.replaceChar[i]).join(x.replaceCharWith);
            }
            x.lowerCase===true ? $(x.outPut).val(formatTxt.toLowerCase()) : $(x.outPut).val(formatTxt);
        }

        $(document).on("keyup", currentInput, main);
    }
    
    //call method here 

    $("#product_name").fromatInput({
        outPut: "#product_slug",
        replaceChar: [" ", ",", "@"],
        replaceCharWith: "_",
        lowerCase: true
    });