Код JavaScript для капитализации текстовых вводов

Я использую популярное расширение Firefox Greasemonkey.

Я хотел бы знать, есть ли способ капитализировать все текстовые входы в определенной форме, поэтому, если бы я использовал jQuery, код выглядел бы примерно так:

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

Теперь, конечно, я знаю .capitalize() не является допустимой функцией, и для того, чтобы капитализировать текст, вам понадобится сложный код JavaScript, но после всего этого я не смог найти тот, который, казалось бы, мог быть реализован в Для Greasemonkey.

может кто-нибудь помочь мне написать этот скрипт?

под заглавной, я имею в виду заглавную первую букву каждого слова, как CSS text-transform:capitalize; и он должен переопределить буквы, которые пользователь может ввести, возможно, сделать это в форме отправки было бы проще...

спасибо.

6
capitalization capitalize greasemonkey javascript jquery

6 ответов

//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;
};

вот демо:http://jsfiddle.net/jasper/qppGQ/1/

это может использоваться внутри обработчика событий, чтобы всегда сохранять заглавную часть текста:

//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

вот демо:http://jsfiddle.net/jasper/qppGQ/2/

обновление

чтобы первая буква была заглавной, а остальная часть слова была строчной, мы можем просто использовать .toLowerCase() в оставшейся части строки после заглавной буквы письмо:

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

вот демо:http://jsfiddle.net/jasper/qppGQ/3/

9

это то, что вы пытаетесь сделать?

(function ($) {

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

})(jQuery);

Если вы хотите выполнить это действие в "реальном времени", вы можете просто обработать действие внутри события:

(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);
4

моя простая реализация функции capitalize разбивает строку на пробелы и капитализирует первую букву каждого слова. Предполагается, что каждое слово разделено хотя бы одним пробелом.

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;
}

пример вывода консоли:

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

вам понадобится обработчик событий для рассматриваемого объекта DOM-в частности,keypress обработчик событий. Вам нужно будет прочитать текст поля ввода после каждого нажатия клавиши, чтобы убедиться, что все слова (текст, окруженный пробелами) имеют первый символ с заглавной буквы.

например: 

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

в качестве общей стратегии я рекомендую разбить значение поля ввода на пробелы (используя str.split(" ");). Затем выполните итерацию каждой из результирующих строк. Для каждой строки срежьте все после первой буквы и добавьте к срезанной строке заглавный первый символ. Вы можете увидеть другие ответы, которые покажут вам, как это сделать. Объедините все эти строки в одну и задайте значение ввода для этой заглавной строки.

0

версия со встроенной привязкой событий

Simpl использовать 

$('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);
0

Я взял советы здесь и сформулировал что-то немного проще, используя стандартный javascript. Мне нужно было использовать каждое слово поля ввода в веб-приложении iPad, autocapitalize не работал последовательно. Вот работа вокруг:

ввод HTML

<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>
0