Код JavaScript для заглавных букв текста

Question

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

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

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

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

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

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

Спасибо.

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

Вот демоверсия: 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/

Answer 2

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

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

Answer 3

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

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"

Answer 4

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

Ввод 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>

Answer 5

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

Простое использование

$('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

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

Например:

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

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