Hướng dẫn auto uppercase input html - tự động đầu vào viết hoa html

Tôi đang sử dụng thuộc tính kiểu 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, ví dụ

1, thì nó sẽ được thay đổi thành các chữ cái như

2 mà không cần người dùng nhấn nút Caps-lock .

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

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.

Simanacci

1.9893 huy hiệu vàng27 Huy hiệu bạc34 Huy hiệu đồng3 gold badges27 silver badges34 bronze badges

hỏi ngày 19 tháng 6 năm 2012 lúc 11:31Jun 19, 2012 at 11:31

1

Bạn đã đặt thuộc tính

3 trên thẻ

4, thay vì

5.

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

Xin lưu ý chuyển đổi này hoàn toàn là trực quan và không thay đổi văn bản được gửi trong bài.purely visual, and does not change the text that is sent in POST.

Lưu ý: Nếu bạn muốn đặt giá trị đầu vào thực tế thành chữ hoa và đảm bảo rằng văn bản được gửi bởi biểu mẫu có ở chữ hoa, bạn có thể sử dụng mã sau: If you want to set the actual input value to uppercase and ensure that the text submitted by the form is in uppercase, you can use the following code:

Đã trả lời ngày 19 tháng 6 năm 2012 lúc 11:35Jun 19, 2012 at 11:35

Freaderfrefallerfreefaller

Phim thương hiệu vàng 19K755 Huy hiệu bạc83 Huy hiệu đồng7 gold badges55 silver badges83 bronze badges

9

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

CHỈNH SỬA

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 mở rộng này sẽ giải quyết điều đó

Đã trả lời ngày 18 tháng 4 năm 2018 lúc 16:36Apr 18, 2018 at 16:36

Yehuda Schwartzyehuda SchwartzYehuda Schwartz

3.1323 huy hiệu vàng27 Huy hiệu bạc36 Huy hiệu đồng3 gold badges27 silver badges36 bronze badges

1

Các câu trả lời với kiểu dáng

6 sẽ không gửi dữ liệu trên máy chủ trên máy chủ - những gì bạn có thể mong đợi. Thay vào đó, bạn có thể làm một cái gì đó như thế này:

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

Trong JavaScript của bạn:

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

Với hàm

7 trên mỗi phím nhấn xuống, giá trị của đầu vào sẽ biến thành dạng chữ hoa của nó.

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

CẬP NHẬT

Theo khuyến nghị từ Dinei, bạn có thể sử dụng sự kiện OnInput thay vì Onkeydown và thoát khỏi

8.

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

Đã trả lời ngày 3 tháng 6 năm 2016 lúc 14:44Jun 3, 2016 at 14:44

Burak Tokakburak TokakBurak Tokak

1.7351 Huy hiệu vàng19 Huy hiệu bạc27 Huy hiệu đồng1 gold badge19 silver badges27 bronze badges

6

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 chỉ muốn đầu vào được viết 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 trên phần tử:

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

9:

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

Bằng cách này, bạn sẽ chỉ in ký các ký tự đã nhập.

Đã trả lời ngày 22 tháng 3 năm 2016 lúc 19:13Mar 22, 2016 at 19:13

Tomericcotomericcotomericco

1.4742 Huy hiệu vàng19 Huy hiệu bạc 30 Huy hiệu Đồng2 gold badges19 silver badges30 bronze badges

3

try

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

Đã trả lời ngày 19 tháng 6 năm 2012 lúc 11:35Jun 19, 2012 at 11:35

1

Freaderfrefaller

1

Phim thương hiệu vàng 19K755 Huy hiệu bạc83 Huy hiệu đồngJun 29, 2016 at 6:04

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

2

3

CHỈNH SỬA

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 mở rộng này sẽ giải quyết điều đó

4

3

Đã trả lời ngày 18 tháng 4 năm 2018 lúc 16:36

Yehuda Schwartzyehuda SchwartzJul 6, 2019 at 22:30

3.1323 huy hiệu vàng27 Huy hiệu bạc36 Huy hiệu đồng

4

Các câu trả lời với kiểu dáng

6 sẽ không gửi dữ liệu trên máy chủ trên máy chủ - những gì bạn có thể mong đợi. Thay vào đó, bạn có thể làm một cái gì đó như thế này:

Đối với đầu vào của bạn, sử dụng onkeydown:Mar 25, 2018 at 11:20

user3094755user3094755user3094755

Trong JavaScript của bạn:14 silver badges20 bronze badges

Với hàm

7 trên mỗi phím nhấn xuống, giá trị của đầu vào sẽ biến thành dạng chữ hoa của nó.

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

CẬP NHẬT

6

Nhập một cái gì đó trong đó, nhấn trả lại hoặc nhấp vào đầu vào, sau đó nhấp vào giữa mục nhập trước đó của bạn, thêm một số văn bản LC, nhấn trả về ...

Đã trả lời ngày 18 tháng 8 năm 2021 lúc 21:32Aug 18, 2021 at 21:32

RobrobRob

611 Huy hiệu bạc5 Huy hiệu đồng1 silver badge5 bronze badges

Điều này sẽ hiển thị đầu vào trong chữ hoa và gửi dữ liệu đầu vào qua POST trong chữ hoa.

HTML

7

JavaScript

8

Đã trả lời ngày 6 tháng 4 năm 2018 lúc 15:51Apr 6, 2018 at 15:51

Shateel Ahmedshateel AhmedShateel Ahmed

1.1441 Huy hiệu vàng10 Huy hiệu bạc21 Huy hiệu đồng1 gold badge10 silver badges21 bronze badges

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

Nếu bạn muốn sử dụng giải pháp CSS với trình giữ chỗ thường, bạn chỉ cần tạo kiểu cho các giữ chỗ riêng. Chia 2 kiểu giữ chỗ cho khả năng tương thích IE.

9

0

Đã trả lời ngày 20 tháng 3 năm 2019 lúc 15:07Mar 20, 2019 at 15:07

LepataylepatayLePatay

Phim huy hiệu bạc 17211 silver badge8 bronze badges

1

Tôi đã đi với phong cách chuyển đổi văn bản: điều viết hoa từ poster. Sau đó, tôi cũng đã làm điều viết hoa trong PHP là tốt. Một số người làm việc quá chăm chỉ với JavaScript đó.

Bạn đã gần gũi với phong cách ở sai vị trí. Bạn đã cố gắng viết hoa một hình ảnh thay vì đầu vào.

2

Tôi không biết tại sao tôi muốn ném thêm một số thứ nếu đó là trang PHP. Đây là điều tôi muốn làm làm cho nó mượt mà hơn cho người điền vào mẫu đơn.

3

Đó là giả sử bạn đang sử dụng PHP làm phụ trợ và đăng lên cùng một trang bạn đang ở. Điều này sẽ giữ cho người dùng không phải điền vào phần đó của biểu mẫu một lần nữa. Ít khó chịu cho người điền vào biểu mẫu.

Đã trả lời ngày 22 tháng 6 năm 2021 lúc 1:30Jun 22, 2021 at 1:30

Trong thẻ đầu vào HTML chỉ là kiểu nó như sau

4

Trong sử dụng PHP/Laravel được hỗ trợ:

5

Đã trả lời ngày 14 tháng 10 lúc 14:16Oct 14 at 14:16

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 không gian trống trong trường đầu vào ở chỉ mục đầu tiên.

6

7

Đã trả lời ngày 6 tháng 4 năm 2019 lúc 7:45Apr 6, 2019 at 7:45

Chỉ cần sử dụng onInput này trong trường đầu vào của bạn:

8

Tripleee

166K28 Huy hiệu vàng255 Huy hiệu bạc300 Huy hiệu đồng28 gold badges255 silver badges300 bronze badges

Đã trả lời ngày 10 tháng 3 lúc 6:09Mar 10 at 6:09

1

Chỉ cần thêm vào đầu vào của bạn (style = "text-transform: chữ hoa")

9

Đã trả lời ngày 25 tháng 3 lúc 21:48Mar 25 at 21:48

0

Đã trả lời ngày 25 tháng 6 năm 2018 lúc 8:56Jun 25, 2018 at 8:56

1