Question

我使用以下样式属性将用户输入设置为大写，以便当用户开始在文本框中键入railway时，则应将其更改为大写字母，如RAILWAY用户无需按下Caps-lock按钮。

这是我用于输入的代码：

<input type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="../images/tickmark.gif" border="0" style='text-transform:uppercase'/>

但是我没有通过使用此属性获得所需的输出。

Answer 1

您已将style属性放在<img>标记上，而不是<input>。

在属性名称和值...

之间使用空格也不是一个好主意

<input type="text" class="normal" 
       name="Name" size="20" maxlength="20" 
       style="text-transform:uppercase" /> 
<img src="../images/tickmark.gif" border="0" />

请注意，此转换纯粹可视化，并且不会更改POST中发送的文本。

Answer 2

text-transformation:uppercase样式的答案不会在提交时将大写数据发送到服务器 - 您可能会发生什么。你可以这样做：

对于您的输入HTML使用onkeydown：

<input name="yourInput" onkeydown="upperCaseF(this)"/>

在您的JavaScript中：

function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}

每按一次按下upperCaseF()功能，输入的值将变为大写形式。

我还添加了1ms的延迟，以便在发生keydown事件后触发功能代码块。

Answer 3

我认为确保以大写形式发布的最强大的解决方案是使用oninput方法内联，如：

<input oninput="this.value = this.value.toUpperCase()" />

Answer 4

第一个答案的问题是占位符也是大写的。如果您只想输入大写，请使用以下解决方案。

为了只选择非空的输入元素，在元素上放置必需的属性：

<input type="text" id="name-input" placeholder="Enter symbol" required="required" />

现在，为了选择它，请使用:valid伪元素：

#name-input:valid { text-transform: uppercase; }

这样你只会输入大写的字符。

Answer 5

试

<input type="text" class="normal" 
       style="text-transform:uppercase" 
       name="Name" size="20" maxlength="20"> 
 <img src="../images/tickmark.gif" border="0"/>

而不是图像将样式标记放在输入上，因为您正在写入输入而非图像

Answer 6

设置以下样式以将所有文本框设置为大写

input {text-transform: uppercase;}

Answer 7

CSS样式的问题在于它没有改变数据，如果你不想拥有JS功能，那么试试......

<input onkeyup="this.value = this.value.toUpperCase()" />

关于它自己，你会看到该字段利用了密钥，因此可能需要将其与其他人建议的style='text-transform:uppercase'结合使用。

Answer 8

这将以大写形式显示输入并通过post以大写形式发送输入数据。

HTML

<input type="text" id="someInput">

的JavaScript

var someInput = document.querySelector('#someInput');
someInput.addEventListener('input', function () {
    someInput.value = someInput.value.toUpperCase();
});

Answer 9

没有人建议：

如果要将CSS解决方案与小写占位符一起使用，则只需分别设置占位符的样式即可。拆分2种占位符样式以实现IE兼容性。

input {
    text-transform: uppercase;
}
input:-ms-input-placeholder {
    text-transform: none;
}
input::placeholder {
    text-transform: none;
}

The below input has lowercase characters, but all typed characters are CSS-uppercased :<br/>
<input type="text" placeholder="ex : ABC" />

Answer 10

尝试以下解决方案，当用户仅在第一个索引的输入字段中输入空格时，这也会引起注意。

document.getElementById('capitalizeInput').addEventListener("keyup",   () => {
  var inputValue = document.getElementById('capitalizeInput')['value']; 
  if (inputValue[0] === ' ') {
      inputValue = '';
    } else if (inputValue) {
      inputValue = inputValue[0].toUpperCase() + inputValue.slice(1);
    }
document.getElementById('capitalizeInput')['value'] = inputValue;
});

<input type="text" id="capitalizeInput" autocomplete="off" />

Answer 11

使用CSS text-transform: uppercase不会更改实际输入，而只会更改其外观。如果您将输入数据发送到服务器，则它仍将小写或您输入了它。要实际转换输入值，您需要添加如下的javascript代码：

document.querySelector("input").addEventListener("input", function(event) {
  event.target.value = event.target.value.toLocaleUpperCase()
})

<input>

在这里，我正在使用toLocaleUpperCase()将input的值转换为大写。直到您需要编辑输入的内容（例如，如果您输入的是ABCXYZ，现在尝试将其更改为ABCLMNXYZ，它将变为ABCLXYZMN，因为在每次输入后，光标会跳到末尾。

要克服光标的这种跳动，我们必须对函数进行以下更改：

document.querySelector("input").addEventListener("input", function(event) {
  var input = event.target;
  var start = input.selectionStart;
  var end = input.selectionEnd;
  input.value = input.value.toLocaleUpperCase();
  input.setSelectionRange(start, end);
})

<input>

现在一切正常，但是如果PC速度较慢，则键入时可能会看到文本从小写字母跳到大写字母。如果这让您感到烦恼，那么是时候使用CSS了，将input: {text-transform: uppercase;}应用于CSS文件，一切都会好起来。

Answer 12

<input style="text-transform:uppercase" type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="../images/tickmark.gif" border="0"/>

我采用了海报中的 text-transform:uppercase 样式。然后我也只是在 php 中做了大写的事情。有些人用那个 javascript 太努力了。

你已经接近了风格在错误的地方。您试图将图像而不是输入大写。

$name = strtoupper($_POST['Name']);

如果它是一个 php 页面，我不知道为什么要添加一些额外的东西。这是我喜欢做的事情，让填写表格的人更顺畅。

<input style="text-transform:uppercase" type = "text" class = "normal" name = "Name" size = "20" maxlength = "20" value="<?php echo $name; ?>"> <img src="../images/tickmark.gif" border="0"/>

假设您使用 PHP 作为后端并发布到您所在的同一页面。这将使用户不必再次填写表单的那部分。让填写表格的人不那么烦人。

Answer 13

<script type="text/javascript">
    function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}
</script>

<input type="text" required="" name="partno" class="form-control" placeholder="Enter a Part No*" onkeydown="upperCaseF(this)">

如何自动将文本框设置为大写？

13 个答案: