cách ẩn con trỏ nhấp nháy trong văn bản nhập?

Question

Tôi muốn tạo một cái gì đó trông giống như một đầu vào được chọn nhưng thực sự không phải, dưới đây là các bước.

Tôi đã thực hiện một <input type="text">.

Tôi đã thêm một background-image, sẽ hiển thị "mũi tên chọn", tạo ấn tượng rằng đó là hộp chọn.

Tôi đã thêm giá trị mặc định vào đầu vào này.

Sẽ có một div ẩn sẽ SlideDown() ngay bên dưới đầu vào này khi tôi nhấp vào nó.

Tôi đã thử điều chỉ đọc để không thể thay đổi giá trị, nhưng con trỏ nhấp nháy sẽ hiển thị.

Nếu tôi sử dụng disabled, con trỏ nhấp nháy sẽ không hiển thị, nhưng hàm .click() hoặc .focus trong jQuery sẽ không hoạt động. Trình đơn thả xuống sẽ không SlideDown().

Làm cách nào để tôi có thể nhấp vào khi không hiển thị con trỏ nhấp nháy?

Dưới đây là đoạn code

<div style="padding-top:17px; overflow:hidden;"> 
    <div style="float:left;"> 
     <label for="secretquestion">Secret Question</label><br> 
     <input type="text" class="inputselect" id="secretquestion" name="secretquestion" value="Choose a Secret Question" tabindex=10 /><br> 
     <div class="selectoptions" id="secretquestionoptions"> 
      <b>test</b> 
     </div> 
    </div> 
</div> 

CSS

.selectoptions 
{ 
    display: none; 
    background-color: white; 
    color: rgb(46,97,158); 
    width: 250px; 
    margin:auto; 
    border-style: solid; 
    border-width:1px; 
    border-color: rgb(46,97,158); 
    font-size: 14px; 
    text-align: center; 
} 

.inputselect { 
    color: white; 
    cursor: pointer; 
    background-image: url('inputselect.png'); 
    padding-top: 5px; 
    padding-bottom: 5px; 
    padding-left:10px; 
    padding-right:-10px; 
    width:240px; 
    border-style: solid; 
    border-color: rgb(46,97,158); 
    border-width: 1px; 
} 
.inputselect:hover { 
    outline:none;  
    color:aqua; 
    cursor: pointer; 
    background-image: url('inputselecthover.png'); 
} 
.inputselect:focus { 
    outline:none;  
    color:aqua; 
    cursor: pointer; 
    background-image: url('inputselecthover.png'); 
} 

Answer 1

Màu sắc của con trỏ phù hợp với màu sắc của văn bản.

<input type="text" style="color: transparent"> 

Nếu bạn thực sự muốn hiển thị văn bản trong hộp nhập liệu (tôi, một số người đang cần), bạn có thể sử dụng bóng văn bản.

<style> 
    body, div, input { 
     color: #afa; 
     text-shadow: 0px 0px 1px #fff; 
    } 
<style> 

(thử nghiệm Firefox và Safari).

Answer 2

Tôi vừa sử dụng làm mờ để loại bỏ con trỏ.

$('input').mousedown(function(e){ 
    e.preventDefault(); 
    $(this).blur(); 
    return false; 
}); 

Answer 3

Thêm loại = "gửi" cũng sẽ hoạt động.

Answer 4

Tôi nghĩ rằng đây là một giải pháp hoàn hảo: làm cho đầu vào đủ rộng, sắp xếp đúng để sàng lọc đúng, do đó làm cho con trỏ và nội dung xác định vị trí tại bên ngoài của màn hình, trong khi nó vẫn còn có thể click

Answer 5

Cuối cùng tôi đã tìm được một giải pháp lừa.

<div class="wrapper"> 
    <input type="text" /> 
</div> 

.wrappr { 
    width: 100px; 
    height: 30px; 
    overflow: hidden; 
} 
.wrapper input { 
    width: 120px; 
    height: 30px; 
    margin-left: -20px; 
    text-align: left; 
} 

và trong bài giảng của tôi, nó hoạt động!

Answer 6

này có thể hữu ích (mặc dù không phải là một câu trả lời hoàn chỉnh) - Tôi sử dụng nó để vô hiệu hóa đầu vào trong một dự án gần đây:

document.getElementById('Object').readOnly = true; 
    document.getElementById('Object').style.backgroundColor = '#e6e6e6'; 
    document.getElementById('Object').onfocus = function(){ 
     document.getElementById('Object').blur(); 
    }; 

Người dùng tập trung vào đầu vào khi nhấp chuột vào nó, làm mờ() sau đó loại bỏ tiêu điểm. Giữa điều này, thiết lập readOnly thành "True" và thiết lập màu nền thành màu xám (# e6e6e6), người dùng của bạn không nên nhầm lẫn.