I've been trying to put together an input where the text automatically capitalizes the first letter of each word and makes all other letters lowercase for that word. I had some success using that for just making everything lower case after the first letter for the input with this:

 <input type = "text" size="8" name="textfield1" id="textfield1" />

with the javascript being

        document.getElementById('textfield1').addEventListener("keyup",   () => {
  var inputValue = document.getElementById('textfield1')['value']; 
  if (inputValue[0] === ' ') {
      inputValue = '';
    } else if (inputValue) {
      inputValue = inputValue[0].toUpperCase()   inputValue.slice(1).toLowerCase();
    }
    
document.getElementById('textfield1')['value'] = inputValue;
});

I tried adding map(), split(), and join() in various ways based off of lessons I've found (I'm learning on my own, no formal training since high school) for use in a string with the console.log methods but I'm confused on how I can apply this to an input. It would take too long to note everything I've tried but one thing I did was this:

        document.getElementById('textfield1').addEventListener("keyup",   () => {
  var inputValue = document.getElementById('textfield1')['value']; 
if (inputValue[0] === ' ') {
      inputValue = '';
    } else if (inputValue) {
  input.content = input.content.split(' ').map(function(inputValue) {
      return inputValue[0].toUpperCase()   inputValue.slice(1).toLowerCase();
}).join(' ');
    }
    
document.getElementById('textfield1')['value'] = inputValue;
});

I'm not sure what I'm missing here. I'm sure there's something that I'm not seeing or understanding. I also tried looking to see if there was something similar listed on here or elsewhere in relation to this and inputs but I didn't see anything specific to what I was looking for.

I want the input to remain the same for what comes up with the output into another box when it gets copied over.

Example of what I'm trying to do is:

input of textfield: heLlo OuT thERe!

output to another textarea with the click of a button: Hello Out There!

CodePudding user response：

Your second version would be correct. However in this code:

else if (inputValue) {
  input.content = input.content.split(' ').map(function(inputValue) {
      return inputValue[0].toUpperCase()   inputValue.slice(1).toLowerCase();
}).join(' ');
    }

You started to use some input.content instead of the inputValue variable. Most probably yout mistake lies there.

CodePudding user response：

You can use this regex replace to change a sentence to Proper Case:

const regex = /\b(\w)(\w*)/g;
const input = 'Fix this lower and UPPER to Proper'
let result = input.replace(regex, function(m, c1, c2) {
  return c1.toUpperCase()   c2.toLowerCase()
});
console.log('result: ', result);
// => 'Fix This Lower And Upper To Proper'

Explanation of regex:

• \b -- word boundary
• (\w) -- capture group 1: a singe word character
• (\w*) --capture group 2: zero to multiple word characters
• g -- flag for global, e.g. run pattern multiple times
• replace function: parameter c1 contains capture group 1, c2 contains capture group 2