CSS & jQuery - transform text to "capitalize" - when got with .val() get's lowercase

Question

As you can see in example, i've putted all lowercase text and it shows uppercase, but when i use .val() in jQuery to get value, i get lowercase.. But if you type in uppercase it will be uppercase..

$(function(){
  console.log($('#test_capitalize').val());
  $('#re-test').on('click', function(){ 
    console.log($('#test_capitalize').val());
  });
});

#test_capitalize {
  text-transform: capitalize;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" id="test_capitalize" value="some small text" />

<button id="re-test">Get value</button>

Is it a bug or it should behave like this... ?

Answer 1

I don't think I understand your question. The value of the input is case sensitive, therefore if you type lowercase the value of the input will be lowercase, same case for uppercase.

You are seeing capitalized words in the input because you're applying a text-transform: capitalize; to it via css. This is used to pretty-print the text, but is for display only, it won't alter the actual value of the input field. That's why you are seeing the non-capitalized value in the console.