इनपुट टेक्स्ट में ब्लिंकिंग कर्सर को कैसे छिपाना है?

Question

मैं ऐसा कुछ बनाना चाहता हूं जो एक चुनिंदा इनपुट की तरह दिखता है लेकिन वास्तव में नहीं, यहां चरण हैं।

मैंने <input type="text"> बनाया।

मैंने background-image जोड़ा, जो "चयन तीर" दिखाएगा, यह इंप्रेशन देकर कि यह एक चुनिंदा बॉक्स है।

मैंने इस इनपुट में एक डिफ़ॉल्ट मान जोड़ा।

एक छिपी हुई div होगी जो SlideDown() पर इस इनपुट के ठीक नीचे होगा जब मैं उस पर क्लिक करता हूं।

मैंने केवल पढ़ने की कोशिश की ताकि मूल्य बदला जा सके, लेकिन चमकते कर्सर दिखाई देंगे।

यदि मैं disabled का उपयोग करता हूं, तो ब्लिंकिंग कर्सर दिखाई नहीं देगा, लेकिन .click() या .focus jQuery में फ़ंक्शन काम नहीं करेगा। ड्रॉप डाउन मेनू SlideDown() नहीं होगा।

ब्लिंकिंग कर्सर नहीं दिखाते समय मैं इसे क्लिक करने योग्य कैसे बना सकता हूं?

यहाँ कोड

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

सीएसएस

.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

कर्सर का रंग पाठ का रंग से मेल खाता है।

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

आप वास्तव में इनपुट बॉक्स में पाठ दिखाना चाहते हैं (मेरे, कुछ लोगों को जरूरतमंद कर रहे हैं), आप एक पाठ छाया का उपयोग कर सकते हैं।

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

(परीक्षण फ़ायरफ़ॉक्स और सफारी)।

Answer 2

मैंने कर्सर से छुटकारा पाने के लिए बस एक धुंध का उपयोग किया।

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

Answer 3

प्रकार जोड़ें = "सबमिट" भी काम करना चाहिए।

Answer 4

मुझे लगता है कि यह एक आदर्श समाधान है: विस्तृत पर्याप्त इनपुट बनाने के लिए, स्क्रीन करने के लिए सही है, इस प्रकार कर्सर और सामग्री के लिए स्क्रीन के बाहर पर पता लगाने बनाने के दाएं संरेखित है, जबकि यह अभी भी क्लिक करने योग्य है

Answer 5

मुझे अंत में एक चाल समाधान मिल गया।

<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; 
} 

और मेरे स्टेशन में, यह काम करता है!

Answer 6

यह मददगार हो सकता है (हालांकि नहीं एक पूर्ण प्रतिक्रिया) - मैं हाल ही में एक परियोजना में निवेश के निष्क्रिय करने के लिए इसका इस्तेमाल किया:

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

उपयोगकर्ता इनपुट पर केंद्रित है, जब यह में क्लिक करें, कलंक() फ़ंक्शन फिर फोकस हटा देता है। इसके बीच, केवल पढ़ने के लिए "True" पर सेट करें और पृष्ठभूमि रंग को ग्रे (# e6e6e6) पर सेट करें, आपके उपयोगकर्ता को भ्रमित नहीं होना चाहिए।