最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Auto Capitalize ONLY the First Letter of Each Word in an Input Field - Stack Overflow

programmeradmin1浏览0评论

I have multiple input fields that obtain a city. I would like while the user is imputing the city name that the first letter of each word to auto capitalize, while the rest of the letters are forced lower case.

NOTE: Because of my requirements, the CSS text-transform property won't work because it only modifies the first letter of the words - - if the user types capital letters beyond the first letter, that won't adjust it.

So far i have this JavaScript:

function forceLower(strInput) {
  strInput.value=strInput.value.toLowerCase();
}

Which is successfully converting the entire input to lowercase.

I have multiple input fields that obtain a city. I would like while the user is imputing the city name that the first letter of each word to auto capitalize, while the rest of the letters are forced lower case.

NOTE: Because of my requirements, the CSS text-transform property won't work because it only modifies the first letter of the words - - if the user types capital letters beyond the first letter, that won't adjust it.

So far i have this JavaScript:

function forceLower(strInput) {
  strInput.value=strInput.value.toLowerCase();
}

Which is successfully converting the entire input to lowercase.

Share Improve this question edited Dec 8, 2016 at 22:12 Scott Marcus 65.9k6 gold badges53 silver badges80 bronze badges asked Dec 8, 2016 at 20:33 Charles L.Charles L. 1,9702 gold badges39 silver badges60 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 6

See ments inline for details:

// Get a reference to the input and wire it up to an input event handler that
// calls the fixer function
document.getElementById("txtTest").addEventListener("input", forceLower);

// Event handling functions are automatically passed a reference to the
// event that triggered them as the first argument (evt)
function forceLower(evt) {
  // Get an array of all the words (in all lower case)
  var words = evt.target.value.toLowerCase().split(/\s+/g);
  
  // Loop through the array and replace the first letter with a cap
  var newWords = words.map(function(element){   
    // As long as we're not dealing with an empty array element, return the first letter
    // of the word, converted to upper case and add the rest of the letters from this word.
    // Return the final word to a new array
    return element !== "" ?  element[0].toUpperCase() + element.substr(1, element.length) : "";
  });
  
 // Replace the original value with the updated array of capitalized words.
 evt.target.value = newWords.join(" "); 
}
<input type="text" id="txtTest">

you can use css for this text-transform: capitalize

function firstCap(str){
  var returnVar='';
  var strSplit=str.split(' ');
 for(var i=0;i<strSplit.length;i++){
 returnVar=returnVar+strSplit[i].substring(0,1).toUpperCase()+strSplit[i].substring(1).toLowerCase() +' ';
  }
return returnVar
}
div , input {text-transform: capitalize;}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> this is only the first lettter</div>
<input type="text"/>

发布评论

评论列表(0)

  1. 暂无评论