Question

我有一个用户输入姓氏的表格。如果他们用所有小写字母输入它，我希望它能正确显示例如。用户输入单词'smith'但响应页面会显示'Smith'而不是？

<p>Name: <input type="text" name="surname"></p>

Answer 1

您需要做的就是将input大写，请看下面的代码：

P.S。 - 我修改了您的p课程，以便在您将样式应用到input时不会感到困惑。因为它可能会影响您网站中的每个input，如果已应用于input本身。

＆＃13;

.surname input {
  text-transform: capitalize
}

＆＃13;

<p class="surname">Name:
  <input type="text" name="surname">
</p>

＆＃13;

编辑：这里是jQuery解决方案，它将通过响应页面解决您的问题。

＆＃13;

   jQuery.fn.capitalize = function() {
        $(this[0]).keyup(function(event) {
            var box = event.target;
            var txt = $(this).val();
            var start = box.selectionStart;
            var end = box.selectionEnd;
            $(this).val(txt.replace(/^(.)|(\s|\-)(.)/g, function($1) {
                return $1.toUpperCase();
            }));
            box.setSelectionRange(start, end);
        });

       return this;
    }
    $('.surname input').capitalize();

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <p class="surname">Name:
      <input type="text" name="surname">
    </p>

＆＃13;

Answer 2

您可以使用Javascript检查浏览器中的输入值，如果第一个字符不是大写，则修改该值。我推荐JQuery。或者使用CSS来大写它。

另请注意，浏览器端Javascript或CSS转换不保证表单的POST只发送大写输入;可以绕过浏览器中发生的任何事情。因此，服务器端您将需要执行相同操作（必要时大写）。

说到姓氏，你会把“范德法特”大都化吗？

Answer 3

CSS：

text-transform：capitalize;

<p>Name: <input type="text" style="text-transform: capitalize;" name="surname"></p>

表格大写输入

3 个答案: