Làm thế nào để bạn tự động đặt hộp văn bản thành Uppercase?

Tôi đang sử dụng thuộc tính style sau để đặt đầu vào của người dùng thành chữ hoa để khi người dùng bắt đầu nhập vào hộp văn bản chẳng hạn railway, thì nó nên được thay đổi thành chữ in hoa như thế RAILWAY mà không cần người dùng phải nhấn nút Caps-lock.

Đây là mã tôi đang sử dụng cho đầu vào:

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

Nhưng tôi không nhận được đầu ra mong muốn bằng cách sử dụng thuộc tính này.

Bạn đã đặt stylethuộc tính trên <img>thẻ, thay vì <input>.

Nó cũng không phải là một ý tưởng tốt để có khoảng cách giữa tên thuộc tính và giá trị ...

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

Xin lưu ý việc chuyển đổi này hoàn toàn trực quan và không thay đổi văn bản được gửi trong POST.

Tôi nghĩ rằng giải pháp mạnh mẽ nhất sẽ đảm bảo rằng nó được đăng bằng chữ in hoa là sử dụng phương thức oninput nội tuyến như:

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

BIÊN TẬP

Một số người đã phàn nàn rằng con trỏ nhảy đến cuối khi chỉnh sửa giá trị, vì vậy phiên bản hơi mở rộng này sẽ giải quyết điều đó

<input oninput="let p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p, p);" />

Các câu trả lời với text-transformation:uppercasekiểu dáng sẽ không gửi dữ liệu cấp trên đến máy chủ khi gửi - những gì bạn có thể mong đợi. Bạn có thể làm một cái gì đó như thế này thay thế:

Đối với HTML đầu vào của bạn, hãy sử dụng onkeydown:

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

Trong JavaScript của bạn:

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

Với upperCaseF()chức năng trên mỗi phím bấm xuống, giá trị của đầu vào sẽ chuyển thành dạng chữ hoa.

Tôi cũng đã thêm độ trễ 1ms để khối mã chức năng kích hoạt sau khi xảy ra sự kiện khóa phím.

Vấn đề với câu trả lời đầu tiên là trình giữ chỗ cũng sẽ được viết hoa. Trong trường hợp bạn muốn CHỈ đầu vào là chữ hoa, hãy sử dụng giải pháp sau.

Để chỉ chọn phần tử đầu vào không trống, đặt thuộc tính bắt buộc vào phần tử:

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

Bây giờ, để chọn nó, sử dụng :validphần tử giả:

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

Bằng cách này, bạn sẽ viết hoa chỉ các ký tự.

thử

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

Thay vì hình ảnh đặt thẻ kiểu vào đầu vào vì bạn đang viết trên đầu vào không phải trên hình ảnh

Đặt kiểu sau để đặt tất cả hộp văn bản thành chữ hoa

input {text-transform: uppercase;}

Vấn đề với CSS Styling là nó không thay đổi dữ liệu và nếu bạn không muốn có chức năng JS thì hãy thử ...

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

trên chính nó, bạn sẽ thấy trường viết hoa trên keyup, vì vậy có thể nên kết hợp điều này với những style='text-transform:uppercase'người khác đã đề xuất.

Sử dụng CSS text-transform: uppercasekhông thay đổi đầu vào thực tế mà chỉ thay đổi giao diện của nó. Nếu bạn gửi dữ liệu đầu vào đến một máy chủ thì nó vẫn sẽ viết thường hoặc tuy nhiên bạn đã nhập nó. Để thực sự chuyển đổi giá trị đầu vào, bạn cần thêm mã javascript như dưới đây:

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

<input>

Ở đây tôi đang sử dụng toLocaleUpperCase()để chuyển đổiinput giá trị thành chữ hoa. Nó hoạt động tốt cho đến khi bạn cần chỉnh sửa những gì bạn đã nhập, ví dụ: nếu bạn đã nhập ABCXYZ và bây giờ bạn cố gắng thay đổi nó thành ABCLMNXYZ, nó sẽ trở thành ABCLXYZMN vì sau mỗi lần nhập, con trỏ sẽ nhảy đến cuối.

Để khắc phục bước nhảy này của con trỏ, chúng ta phải thực hiện các thay đổi sau trong chức năng của mình:

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>

Bây giờ mọi thứ hoạt động như mong đợi, nhưng nếu bạn có PC chậm, bạn có thể thấy văn bản nhảy từ chữ thường sang chữ hoa khi bạn nhập. Nếu điều này làm bạn khó chịu, đây là lúc sử dụng CSS, áp dụng input: {text-transform: uppercase;}cho tệp CSS và mọi thứ sẽ ổn.

Điều này sẽ hiển thị đầu vào bằng chữ hoa và gửi dữ liệu đầu vào thông qua bài viết bằng chữ in hoa.

HTML

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

JavaScript

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

Như không ai đề xuất:

Nếu bạn muốn sử dụng giải pháp CSS với trình giữ chỗ chữ thường, bạn chỉ cần tạo kiểu riêng cho trình giữ chỗ. Chia 2 kiểu giữ chỗ để tương thích với 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" />

Hãy thử giải pháp bên dưới, Điều này cũng sẽ cẩn thận khi người dùng chỉ nhập vào khoảng trống trong trường đầu vào ở chỉ mục đầu tiên.

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" />

<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)">