How to make in input the first letter capitalized?

Question

How to make in input the first letter capitalized? Css method text-transform: capitalize; does not fit.

var positions = $('ul li');

var inputSearch = $('input');
inputSearch.val('').on('input', function(e){
  var terms = this.value.toLowerCase().split(/[\s,.]+/);

  positions.each(function(){
    var text = this.innerText.toLowerCase();

    this.hidden = !terms.every(function(term){
      return text.indexOf(term) !== -1;
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="placeholder">

<ul>
  <li>wrew</li>
  <li>w</li>
  <li>rew</li>
</ul>

"*text-transform: capitalize; does not fit*" -- Why? What's wrong with that as a solution? — p.s.w.g, Apr 15 '19 at 16:33
Why was my XY problem statement deleted? This question has not clearly stated what the problem is. Only what they want. — Taplar, Apr 15 '19 at 16:36

score 0 · Answer 1 · answered Apr 15 '19 at 16:35

0

$('ul li').each(function(index, elem){
  var text = $(elem).text();
  text = text.charAt(0).toUpperCase() + text.slice(1);
  $(elem).text(text);
});

answered Apr 15 '19 at 16:35

Niladri

169
1
5

score 0 · Answer 2 · answered Apr 15 '19 at 16:37

You can use the code below. This code will track when you press the key, and when you do, it'll get the current value of the input (before the key you pressed is added). It would then check if the last character in the input field is a space. If it is, it'll add to text the key you just pressed, but uppercase. If not, it'll simply add the key you just pressed to text

Then, the next time you press any key, the value of the input would change the the value of text, which would have the first letter of every word capitalized.

var text = "";
var val;

$(".input").keypress(function(e) {
  val = $(this).val();
  if (val[val.length - 1] == ' ') {
    text += e.key.toUpperCase();
  }
  else {
    text += e.key;
  }
});

$(".input").keydown(function() {
  $(this).val(text);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="Placeholder" class="input" />

How to make in input the first letter capitalized?

2 Answers2