JavaScript code for using text attachments

Question

I use the popular Firefox Greasemonkey extension.

I would like to know if there is a way to smooth out all text inputs in a specific form, so if I were using jQuery, the code would look something like this:

$('form#formid input[type=text]').capitalize(); 

Now, of course, I know that .capitalize() not a valid function, and in order to extract the text, you will need complex JavaScript code, but after all Googling I could not find one that, it would seem, could be implemented in Greasemonkey.

Can someone help me write this script?

Using capitalization, I mean the first capital letter of each word, for example CSS text-transform:capitalize; , and it should redefine the letters that the user can insert, perhaps it will be easier to do this in the submit form ...

Thanks.

Answer 1

 //add a function to jQuery so we can call it on our jQuery collections $.fn.capitalize = function () { //iterate through each of the elements passed in, `$.each()` is faster than `.each() $.each(this, function () { //split the value of this input by the spaces var split = this.value.split(' '); //iterate through each of the "words" and capitalize them for (var i = 0, len = split.length; i < len; i++) { split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1); } //re-join the string and set the value of the element this.value = split.join(' '); }); return this; }; 

Here is a demo: http://jsfiddle.net/jasper/qppGQ/1/

This can be used inside the event handler to always keep the header of the text:

 //when the user presses a key and the value of the `textarea` is changed, the new value will have all capitalized words $('textarea').on('keyup', function () { $(this).capitalize(); }).capitalize();//also capitalize the `textarea` element(s) on initialization 

Here is a demo: http://jsfiddle.net/jasper/qppGQ/2/

Update

So that the first letter is capitalized and the rest of the word is lowercase, we can simply use .toLowerCase() in the rest of the line after the capital letter of the first letter:

  ... for (var i = 0, len = split.length; i < len; i++) { split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1).toLowerCase(); } ... 

Here is a demo: http://jsfiddle.net/jasper/qppGQ/3/

Answer 2

Is this what you are trying to do?

 (function ($) { $.fn.capitalize = function () { return this.val(function (i, oldValue) { return oldValue.charAt(0).toUpperCase() + oldValue.slice(1); }); }; })(jQuery); 

If you want to perform this action in real time, you can simply handle the action inside the event:

 (function ($) { $.fn.capitalize = function () { this.on('keyup.capitalize change.capitalize', function () { $(this).val(function (i, oldValue) { return oldValue.charAt(0).toUpperCase() + oldValue.slice(1); }); }); }; })(jQuery); 

Answer 3

My simple implementation of the capize function breaks a string with spaces and smoothes the first letter of each word. He suggests that every word is divided into at least one space.

 function capitalize(text) { var i, words, w, result = ''; words = text.split(' '); for (i = 0; i < words.length; i += 1) { w = words[i]; result += w.substr(0,1).toUpperCase() + w.substr(1); if (i < words.length - 1) { result += ' '; // Add the spaces back in after splitting } } return result; } 

Example console output:

 > capitalize("some tEsT e strING a B c 1 2 3") "Some TEsT E StrING ABC 1 2 3" 

Answer 4

You will need an event handler for the DOM object, in particular, a keypress event keypress . You will need to read the text of the input field after each keystroke to ensure that all words (text surrounded by spaces) have the first character, capitalized.

For instance:

 $('form#formid input[type=text]').keypress(function(event) { // Function body goes here }); 

As a general strategy, I recommend separating the value of the input field with spaces (using str.split(" "); ). Then repeat each of the received lines. For each line, cut everything after the first letter and add the first capital letter to the chopped line. You can see how other answers show how to do this. Combine all of these lines into one and set the input value to this header line.

Answer 5

with event binding built into

Just use

 $('input[type="text"]').capitalize() 

http://jsfiddle.net/uUjgg/

 (function($) { $.fn.capitalize = function() { return this.each(function() { var $field = $(this); $field.on('keyup change', function() { $field.val(function(i, old) { if (old.indexOf(' ') > -1) { var words = old.split(' '); for (i = 0; i < words.length; i++) { words[i] = caps(words[i]); } return words.join(' '); } else { return caps(old); } }); }); }); function caps(str) { return str.charAt(0).toUpperCase() + str.slice(1); } }; })(jQuery); 

Answer 6

I took the tips here and made something a little easier using standard javascript. I needed to smooth out every word of the input window in the iPad Web App, autocapitalize did not work consistently. Here's the work around:

HTML input

 <input type="text" id="this_input" name="this_input" onkeyup="javascript:capitalize(this.id, this.value);"> 

Javascript

 <script type="text/javascript"> function capitalize(textboxid, text) { // string with alteast one character var i, words, w, result = ''; words = text.split(' '); for (i = 0; i < words.length; i += 1) { w = words[i]; result += w.substr(0,1).toUpperCase() + w.substr(1); if (i < words.length - 1) { result += ' '; // Add the spaces back in after splitting } } document.getElementById(textboxid).value = result; } </script>