Question

我需要创建一个具有以下功能的capatalization jQuery插件：

自动将每个字词大写
当用户点击退格时，他仍然可以更正角色，例如他键入“John Mayer”，但他决定，“Mayer”应该没有大写字母，所以他用退格键将其改为“mayer”。

到目前为止我尝试了什么：

field.on('keyup change', function(e){
  var val = field.val();

  field.val(val.replace(/^(.)|\s(.)/g, function($1){ return $1.toUpperCase( ); }));
});

问题是，正则表达式解析整个值，但只应解析键入的新字符。

感谢您阅读

Answer 1

类似这样的东西，我觉得它有效但我在笔记本电脑上按空格键时似乎没有得到键码：S

这个想法是你从文本创建一个数组，操纵最后一个单词lword（数组的最后一个元素）然后将数组作为字符串放回到输入框/文本区域

$('input').keypress(function(e) {
    var $t = $(this);
        key = e.keyCode,
        txt = $t.val().split(' '),
        lword = txt[(txt.length - 1)];

    function replace() {
        txt[(txt.length - 1)] = lword;
        $t.val(txt.join(' '));
    }

    function undo() {
        lword = lword.toLowerCase();
        replace();
    }

    function capitalize(n) {
        lword = lword.charAt(n).toUpperCase() + lword.slice(n+1);
        replace();
    }

    if (key === 8) {
        undo();
    } else if (key === 32) {
        capitalize(0);
    }

});

demo

Answer 2

我在经过一些争吵后自己修好了，但这是我的解决方案：

var doCap = false;

$('input').keydown(function(e) {
    var input = $(this);
    var val = input.val();

    if(doCap){
        var lastVal = val.substr(val.length - 1);

        if(lastVal !== " "){
            input.val(val.substring(0, val.length - 1) + lastVal.toUpperCase());
            doCap = false;
        }
    }
});

$('input').keypress(function(e){
    var input = $(this);
    var key = e.keyCode;
    var val = input.val();

    // Capitalize first character ever typed.
    if(val.length === 1){
        input.val(val.substr(0, 1).toUpperCase() + val.slice(1));
    }

    if(key === 32){

        // Prevent double spaces.
        if(val.substr(val.length - 1, 1) === " "){
            return false;
        }

        doCap = true;
    }
});

http://jsfiddle.net/u4pxA/4/

感谢所有反馈，帮助。

Answer 3

这在Chrome中运行良好，但不幸的是，这似乎在Firefox中无法正常运行。我能够处理这个使用模糊的解决方案。似乎适用于所有浏览器。

<强> HTML

<label>Address 1</label>
<input name="addressaddress1" id="addressaddress1" value=""
size="25" />

<label>Address 2</label>
<input name="addressaddress1" id="addressaddress1" value=""
size="25" />

<强>的Javascript

$.fn.capitalize = function (e) {
    $.each(this, function () {
        if( $('body').data(this.id) != this.value )
        {
            var split = this.value.split(' ');
            for (var i = 0, len = split.length; i < len; i++) {
                split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1);
            }
            this.value = split.join(' ');
        }
    });

    return this;
};

$('[id^=address]').on('blur', function (e) {
    $(this).capitalize();
});

http://jsfiddle.net/bsegovia/V4ATc/31/

UPDATE !! 以前的解决方案没有解决所有CAPS INPUT。请参阅此jsfiddle以获取更正后的脚本。 http://jsfiddle.net/bsegovia/V4ATc/

Answer 4

自动资本化每个世界的第一世界

//usage
$("input").keyup(function() {
toUpper(this);
});


//function
function toUpper(obj) {
var mystring = obj.value;
var sp = mystring.split(' ');
var wl=0;
var f ,r;
var word = new Array();
for (i = 0 ; i < sp.length ; i ++ ) {
f = sp[i].substring(0,1).toUpperCase();
r = sp[i].substring(1).toLowerCase();
word[i] = f+r;
}
newstring = word.join(' ');
obj.value = newstring;
return true;
}

jQuery大写文本输入

4 个答案: