Làm thế nào để ẩn con trỏ nhấp nháy hộp văn bản?

Question

Tôi cần phải ẩn con trỏ nhấp nháy của hộp văn bản trong CSS/Javascript.

Có thể không?

Answer 1

<input type=text disabled="disabled"/> 

vì tôi không thể thấy bất kỳ lý do nào khác bạn có thể muốn làm điều đó.

chỉnh sửa:

i đoán bạn muốn cho phép người sử dụng để di chuyển văn bản đó là lớn hơn khu vực, nhưng không hiển thị nhấp nháy?

nếu đúng như vậy, bạn vẫn muốn vô hiệu hóa nó. không chỉ ẩn con trỏ nhấp nháy. nếu người dùng không thể nhập ở đó, nó sẽ bị vô hiệu hóa. giai đoạn.

bây giờ, nếu bạn vẫn muốn cho phép người dùng xem tất cả nội dung, bạn phải tạo đầu vào lớn như nội dung. không có lối thoát đó.

và sau đó giới hạn kích thước với bố mẹ div bằng CSS overflow: hidden hoặc scroll.

<div style="overflow: scroll-x;"><input size=255 value="some string 255 char long" /></div> 

Answer 2

Bạn có thể thiết lập một maxlength trên hộp và sau đó sử dụng text-indent để di chuyển con trỏ trở lại nhân vật nhiều hơn maxlength.

Ví dụ: bạn có thể đặt maxlength=20 và sau đó đặt hộp văn bản text-indent: -20em cách văn bản bắt đầu ra khỏi ranh giới của ô và không bao giờ có thể xem được.

Answer 3

Điều này khá cũ, nhưng tôi chỉ đang xử lý một vấn đề tương tự. Đối với các trình duyệt hỗ trợ nó (có nghĩa là, không phải IE8), bạn có thể đặt màu của phần tử đầu vào giống với màu nền của nó (có thể là màu trắng), và sau đó con trỏ sẽ bị ẩn.

Answer 4

Làm cho con trỏ có cùng màu với nền?

Answer 5

Đây là giải pháp của tôi từ một câu hỏi khác, mà tôi đã trả lời rồi:

https://stackoverflow.com/a/23472096/1806628

---

Ý tưởng cơ bản là, màu sắc của con trỏ cũng giống như màu sắc của văn bản. Vì vậy, điều đầu tiên bạn làm là làm cho văn bản trong suốt, do đó lấy con trỏ đi với nó. Sau đó, bạn có thể hiển thị lại văn bản bằng một bóng văn bản.

 
input[type="text"]{ 
    color : transparent; 
    text-shadow : 0 0 0 #000; 
} 
input[type="text"]:focus{ 
    outline : none; 
} 

Cảnh báo:

Nó dường như không làm việc dưới iOS 8. (Cảm ơn @Altaveron for the info)

---

Một ý tưởng của tôi là một chút hacky hơn và yêu cầu javascript.

HTML và CSS phần:

Bạn làm cho lĩnh vực 2 đầu vào và vị trí một cách chính xác trên đỉnh khác với z-index vvSau đó, bạn làm cho trường nhập trên cùng hoàn toàn trong suốt, không lấy nét, không có màu và giống nhau. Bạn cần đặt đầu vào hiển thị, thấp hơn thành bị tắt, để nó chỉ hiển thị nội dung của đầu vào ở trên, nhưng không thực sự hoạt động.

Javascript phần:

Sau khi tất cả các bên trên bạn đồng bộ hóa hai đầu vào. Khi nhấn phím hoặc thay đổi, bạn sao chép nội dung của đầu vào cao hơn xuống thấp hơn.

Tổng hợp tất cả những điều trên: bạn nhập vào đầu vào vô hình và sẽ được gửi đến phụ trợ khi biểu mẫu được gửi, nhưng mọi cập nhật của văn bản trong đó sẽ được lặp lại vào trường nhập có thể nhìn thấy nhưng bị tắt.

Answer 6

Nếu đó là đầu vào có thuộc tính readonly = "readonly" trên đó, Safari trên iOS vẫn hiển thị con trỏ nhấp nháy khi lấy nét.

Vì vậy, để loại bỏ các nhấp nháy, sau đây làm việc cho tôi:

-webkit-user-select: none; 
user-select: none;