0

I'm practicing some JavaScript and would love to hear your thoughts regarding this script I wrote. I've managed to make this work. The script makes the first letter of the input value uppercase using the script below. I'm just wondering if this is a good method of doing this/if my steps are in good order just to get better love to hear more ways of doing so, even making an option to eliminate the caps-lock via keyboard thanks,

// my input var
var strInput =document.querySelector("#inputText > input");

// my function and eventlistener
strInput.addEventListener('input',function() {
    //upper case first letter with concatenate string input 
    var outputString = strInput.value.charAt(0).toUpperCase() + strInput.value.slice(1);
    this.value = outputString;
});
GrumpyCrouton
  • 8,486
  • 7
  • 32
  • 71
osherez
  • 99
  • 1
  • 13
  • Possible duplicate of [Convert first letter to uppercase on input box](https://stackoverflow.com/questions/14688141/convert-first-letter-to-uppercase-on-input-box) – Waleed Iqbal Jan 22 '18 at 12:49
  • 1
    There is some inconsistency, you access the same object via `this` _and_ via the existing reference, just use the reference. Also you can leverage syntactic sugar to make the code more readable. `strInput.value = strInput.value[0].toUpperCase() + strInput.value.substr(1);` – Aluan Haddad Jan 22 '18 at 12:51
  • @AluanHaddad using `this` in the present position is perfectly fine – flx Jan 22 '18 at 13:39
  • 1
    @osherez Your code is fine. just `outPut` seems kinda odd since "output" is one word. Also you should indent your code properly! – flx Jan 22 '18 at 13:40
  • @zeropublix he asked how it could be improved and the use of `this` is inconsistent at best because he already has a reference to the element. – Aluan Haddad Jan 22 '18 at 13:40
  • I'm voting to close this question as off-topic because it belongs on Codereview – StudioTime Jan 22 '18 at 13:52
  • Hey Guys, thanks to all really appreciate the help. I'm just wondering how can I take one step up by preventing the caps -look key to overwrite this function and how can I make this function work on the entire site in section there is input? cheers – osherez Jan 22 '18 at 13:56
  • @osherez for the whole page just use a more generalized selector like `document.querySelectorAll("input[type='text']")` and the simple run a for-loop to loop through all found elements and bind the event to it. – flx Jan 22 '18 at 15:04
  • @ zeropublix thanks man learnt a lot , I will appreciate if you could you give an example on how you "bind the event to the loop" cheers my friend :) – osherez Jan 22 '18 at 17:07

1 Answers1

1

As in the comments requested

Here is an example to bind the event to ALL text-inputs (except <textarea> and contenteditable="true")

var txtInputs = document.querySelectorAll("input[type='text'");

//just a simple validation if its not null, undefined or empty
if (txtInputs && txtInputs.length > 0) {
    for (var i = 0; i < txtInputs.length; i++) {
        var txtInput = txtInputs[i];

        txtInput.addEventListener('input', function() { 
            var outputString = this.value.charAt(0).toUpperCase() + this.value.slice(1);
        });
}
flx
  • 1,560
  • 13
  • 22
  • you are a magician my friend, now I understand what you meant. loved how you validated with the if statement, I didn't think of that. basically this validation is a just "safety precautions" to see if there such inputs in the markup right? cheers man learnt a lot from this. – osherez Jan 23 '18 at 08:26
  • 1
    The if-condition is used to fullfill "all pathes". If there is existing elements `` it's a so called "happy case". But you always have to think a step further. What if there is no such element. and the if-condition covers this "path". Think abour you are coding server-based. Exceptions will ruin your day then. But when you code with foresight your always safer. – flx Jan 23 '18 at 08:49
  • Cheers bro appreciate all the good help and knowledge :) best day ahead – osherez Jan 23 '18 at 10:02