将输入框中的第一个字母转换为大写

Question

JS Bin demo

regex 将每个小写单词转换为大写。我有一个全名输入字段。我确实希望用户看到他/她按下的每个单词的第一个字母在输入字段中都转换为大写。

我不知道如何正确替换当前输入字段中的选定字符。

$('input').on('keypress', function(event) {
  var $this = $(this),
      val = $this.val(),
      regex = /\b[a-z]/g;

  val = val.toLowerCase().replace(regex, function(letter) {
    return letter.toUpperCase();
  });

  // I want this value to be in the input field.
  console.log(val);
});

Answer 1

给定即：const str = "hello world" 变为 Hello world

const firstUpper = str.substr(0, 1).toUpperCase() + str.substr(1);

或：

const firstUpper = str.charAt(0).toUpperCase() + str.substr(1);

或：

const firstUpper = str[0] + str.substr(1);

Answer 2

input {
    text-transform: capitalize;
}

http://jsfiddle.net/yuMZq/1/

使用text-transform会更好。

Answer 3

您可以通过检查插入符号位置并重置插入符号位置，将第一个字母转换为大写字母，同时避免光标跳到行首的烦人问题。我通过定义几个函数在表单上执行此操作，一个用于所有大写字母，一个用于正确大小写，一个用于仅初始大写字母...然后两个用于插入符号位置的函数，一个用于获取，一个用于设置：

function ProperCase(el) {
  pos = getInputSelection(el);
  s = $(el).val();
  s = s.toLowerCase().replace(/^(.)|\s(.)|'(.)/g, 
          function($1) { return $1.toUpperCase(); });
  $(el).val(s);
  setCaretPosition(el,pos.start);
}

function UpperCase(el) {
  pos = getInputSelection(el);
  s = $(el).val();
  s = s.toUpperCase();
  $(el).val(s);
  setCaretPosition(el,pos.start);
}

function initialCap(el) {
  pos = getInputSelection(el);
  s = $(el).val();
  s = s.substr(0, 1).toUpperCase() + s.substr(1);
  $(el).val(s);
  setCaretPosition(el,pos.start);
}

/* GETS CARET POSITION */
function getInputSelection(el) {
    var start = 0, end = 0, normalizedValue, range,
        textInputRange, len, endRange;

    if (typeof el.selectionStart == 'number' && typeof el.selectionEnd == 'number') {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");

            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }

    return {
        start: start,
        end: end
    };
}

/* SETS CARET POSITION */
function setCaretPosition(el, caretPos) {

    el.value = el.value;

    // ^ this is used to not only get "focus", but
    // to make sure we don't have it everything -selected-
    // (it causes an issue in chrome, and having it doesn't hurt any other browser)

    if (el !== null) {

        if (el.createTextRange) {
            var range = el.createTextRange();
            range.move('character', caretPos);
            range.select();
            return true;
        }

        else {
            // (el.selectionStart === 0 added for Firefox bug)
            if (el.selectionStart || el.selectionStart === 0) {
                el.focus();
                el.setSelectionRange(caretPos, caretPos);
                return true;
            }

            else  { // fail city, fortunately this never happens (as far as I've tested) :)
                el.focus();
                return false;
            }
        }
    }
}

然后在准备好文档时，我将 keyup 事件侦听器应用于我想要检查的字段，但我只侦听可以实际修改字段内容的键（例如，我跳过“Shift”键......） ，如果用户点击“Esc”，我会恢复该字段的原始值...

  $('.updatablefield', $('#myform')).keyup(function(e) {
    myfield=this.id;
    myfieldname=this.name;
    el = document.getElementById(myfield);
    // or the jquery way:
    // el = $(this)[0];
      if (e.keyCode == 27) {                                 // if esc character is pressed
        $('#'+myfield).val(original_field_values[myfield]); // I stored the original value of the fields in an array...
        // if you only need to do the initial letter uppercase, you can apply it here directly like this:
        initialCap(el);
      }                                                    // end if (e.keyCode == 27)
      // if any other character is pressed that will modify the field (letters, numbers, symbols, space, backspace, del...)
      else if (e.keyCode == 8||e.keycode == 32||e.keyCode > 45 && e.keyCode < 91||e.keyCode > 95 && e.keyCode < 112||e.keyCode > 185 && e.keyCode < 223||e.keyCode == 226) {
        // if you only need to do the initial letter uppercase, you can apply it here directly like this:
        initialCap(el);
      } // end else = if any other character is pressed                      //
  }); // end $(document).keyup(function(e)

你可以在这里看到这个例子的工作原理：http://jsfiddle.net/ZSDXA/

Answer 4

简单地说：

$this.val(val);

---

$(document).ready(function() {    
    $('input').on('keypress', function(event) {
        var $this = $(this),
            val = $this.val();

        val = val.toLowerCase().replace(/\b[a-z]/g, function(letter) {
            return letter.toUpperCase();
        }); 
        console.log(val);
        $this.val(val);
    });
});

---

正如@roXon 所示，这可以简化：

$(document).ready(function() {
    //alert('ready');

    $('input').on('keypress', function(event) {
        var $this = $(this),
            val = $this.val();

        val = val.substr(0, 1).toUpperCase() + val.substr(1).toLowerCase();
        $this.val(val);
    });
});

---

在我看来，另一种更好的解决方案是仅将元素样式设置为capitalized，然后执行逻辑服务器端。

这消除了任何 javascript 的开销，并确保在服务器端处理逻辑（无论如何都应该如此！）

Answer 5

$('input').on('keyup', function(event) {
    $(this).val(function(i, v){
        return v.replace(/[a-zA-Z]/, function(c){
           return c.toUpperCase();
        })
    })
});

http://jsfiddle.net/AbxVx/

Answer 6

这将适用于 keyup 上的每个文本字段调用函数

其中 id 是您的文本字段的 ID，而 value 是您在文本字段中输入的值

function capitalizeFirstLetter(value,id)
{

    if(value.length>0){

        var str= value.replace(value.substr(0,1),value.substr(0,1).toUpperCase());
        document.getElementById(id).value=str;

    }

}

Answer 7

仅使用此此作品用于大写字符中的名字

style="text-transform:capitalize;

喜欢

<asp:TextBox ID="txtName" style="text-transform:capitalize;" runat="server" placeholder="Your Name" required=""></asp:TextBox>

Answer 8

   $('.form-capitalize').keyup(function(event) {
        var $this = $(this),
        val = $this.val(),
        regex = /\b[a-z]/g;
        val = val.toLowerCase().replace(regex, function(letter) {
            return letter.toUpperCase();
        });
        this.value = val;
        // I want this value to be in the input field.
      console.log(val);
    });