unable to change input text to small case on the go in Rails 4

Question

I have the following form in a page in my rails application

    <%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put, novalidate: false }) do |f| %>
      <%= f.error_notification %>
      <%= display_base_errors resource %>
      <div class="tab-pane active performer_new" id="tab1">    
        <% @user.build_performer  unless @user.performer %>
        <%= f.fields_for :performer, @user.performer do |per| %>
          <%= per.input :first_name, :label => "Screen name"%>
        <% end %>

I used the following code in this jsfiddle with a small change to accomodate turbolinks. What am I doing wrong? I checked the head of the file I can see the file that I wrote in the assests.

var read = function(){ 
            $("#user_performer_attributes_first_name").on('input', function(evt) {
               var input = $(this);
               var start = input[0].selectionStart;
               $(this).val(function (_, val) {
                  return val.toLowerCase();
               });
               input[0].selectionStart = input[0].selectionEnd = start;
        });
}
$(document).ready(read);
$(document).on('page:load', read);

But I am not getting the character changed. Why?

Answer 1

Use an event like keyup

$("#user_performer_attributes_first_name").on('keyup', function(evt) {

in place of

$("#user_performer_attributes_first_name").on('input', function(evt) {

Remove $(document).on('page:load', read); from your code and check

Read on()