parameterize

• copy code from github
• but I don't want to exclude Chinese chars, based on this, I added

s = s.replace(/[^\x00-\x7F]/g, "")

add a JS function

• According to this The input event is HTML5, feels like onchange without the need to lose focus on the element. It's not supported by IE8 and below, which should use onpropertychange.
• For non HTML5 solution, according to this, we need onkeydown oncut onpaste
  • onchange occurs only when you blur the textbox
  • onkeyup & onkeypress doesn't always occur on text change
  • onkeydown occurs on text change (but cannot track cut & paste with mouse click)
  • onpaste & oncut occurs with keypress and even with the mouse right click.

require('./parameterize.js')
$(document).on("turbolinks:load", function() {
  $('form').on('input', '.parameterize-to', function(event) {
    console.log("parameterize value updated")
    let tid = $(this).attr('dst-id');
    console.log("DEBUG:: The dst ID is: %s!",tid)
    let content= $(this).val().trim()
    console.log("DEBUG:: The form value is: %s!",content)
    let slug = parameterize(content)
    console.log("DEBUG:: Set value of %s to is: %s!",tid,content)
    $("#"+tid).val(slug);
  });
});

Apply it in views. Set class and ID properly. It works with input, cut & paste in Chrome