अभी भी इनपुट फ़ील्ड में स्थायी मान रखने के दौरान

Question

मुझे नहीं पता कि यह संभव है लेकिन मैं एक इनपुट फ़ील्ड रखना चाहता हूं जहां मेरे पास एक ऐसा मूल्य होगा जो संपादन योग्य नहीं है उपयोगकर्ता। हालांकि, मैं नहीं चाहता कि इनपुट फ़ील्ड "केवल पढ़ने" हो क्योंकि मैं अभी भी उपयोगकर्ता को मूल्य के बाद टेक्स्ट जोड़ने में सक्षम होना चाहता हूं।

यदि आपको यह करने का कोई विचार है, तो मुझे बताएं कि कृपया मुझे बहुत मदद मिलेगी।

संपादित करें: मैं HTML फॉर्म का उपयोग करता हूं।

Answer 1

मेरे लिए थोड़ा अजीब लगता है .. क्यों न केवल टेक्स्ट आउटपुट का उपयोग करें और बाद में इनपुट फ़ील्ड का उपयोग करें?

कभी कभी जन्मतिथि के लिए इस्तेमाल की तरह (हालांकि, हो सकता है अब और नहीं ..)

birthyear: 19[input field] 

संपादित करें:

कुछ जावास्क्रिप्ट सामान की तरह है कि आप के लिए कहा तुम्हें कुछ पता ही सकता है साथ

, हालांकि एक इनपुट उस फ़ील्ड के भीतर पाठ और पकड़ने वाले कीस्ट्रोक के साथ फ़ील्ड, जबकि आप हमेशा वहां रहना चाहते हैं उसके बाद कुछ को अनुमति देते हैं - लेकिन, ठीक है, आपको जेएस का उपयोग करने की आवश्यकता होगी .. और यदि यह सिर्फ इसके लिए है, तो आईडी इसके बजाय यह आवश्यक नहीं है

संपादित करें:

यदि आप केवल दर्शक के लिए एक चाल का उपयोग करना चाहते हैं तो आप टेक्स्ट और इनपुट फ़ील्ड के चारों ओर एक पृष्ठभूमि-छवि/सीमा-शैली का उपयोग कर सकते हैं, इस प्रकार यह टेक्स्ट और इनपुट जैसा दिखता है -डिब्बा।

Answer 2

लगता है जैसे आप प्लेसहोल्डर टेक्स्ट चाहते हैं। एचटीएमएल 5 में आप input तत्व पर placeholder विशेषता सेट कर सकते हैं। यह आधुनिक ब्राउज़रों में काम करेगा।

<input type="email" placeholder="jappleseed@appletree.com" name="reg_email" /> 

अब, पुराने ब्राउज़र के लिए यह काम नहीं करेगा। एक ही UI मान प्रदान करने के लिए आपको एक जावास्क्रिप्ट विकल्प की आवश्यकता होगी।

यह सभी ब्राउज़रों के लिए काम कर सकते हैं:

<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"> 

लेकिन यह सिफारिश नहीं कर रहा है एक बेहतर तरीका (वास्तव में, यह पहली दो दृष्टिकोण का एक संयोजन है) है, क्योंकि: नए ब्राउज़र के लिए उपयोग एचटीएमएल 5 मार्कअप; पुराने ब्राउज़र के लिए jQuery और modernizr। इस तरह आप कोड का केवल एक सेट प्राप्त कर सकते हैं जो सभी उपयोगकर्ता मामलों का समर्थन करेगा।

webdesignerwall.com से सीधे लिया गया:

<script src="jquery.js"></script> 
<script src="modernizr.js"></script> 

<script> 
$(document).ready(function(){ 

if(!Modernizr.input.placeholder){ 

    $('[placeholder]').focus(function() { 
     var input = $(this); 
     if (input.val() == input.attr('placeholder')) { 
     input.val(''); 
     input.removeClass('placeholder'); 
     } 
    }).blur(function() { 
     var input = $(this); 
     if (input.val() == '' || input.val() == input.attr('placeholder')) { 
     input.addClass('placeholder'); 
     input.val(input.attr('placeholder')); 
     } 
    }).blur(); 
    $('[placeholder]').parents('form').submit(function() { 
     $(this).find('[placeholder]').each(function() { 
     var input = $(this); 
     if (input.val() == input.attr('placeholder')) { 
      input.val(''); 
     } 
     }) 
    }); 

} 

</script> 

[आप दोनों jquery.js और modernizr.js अपने वेबपेज के रूप में ही फ़ोल्डर में स्थापित की आवश्यकता होगी।]

नोट: मुझे लगता है कि थोड़ा और शोध बता सकता है कि इस के लिए आधुनिकता की आवश्यकता नहीं है, हालांकि मैं उस विशेष बिंदु के बारे में गलत हो सकता हूं।

Answer 3

शायद, तो आप select मेनू चाहते हैं?

<select name="mySelectMenu"> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
</select> 

क्षमा करें यदि यह वही नहीं है जो आप चाहते हैं। मैं स्ट्रॉ पर पकड़ रहा हूं क्योंकि आप जो मांग रहे हैं वह बहुत अस्पष्ट है।हो सकता है कि आपको इन उदाहरणों में से एक 'संपादन योग्य लेकिन संपादन योग्य' इनपुट का उपयोग नहीं करना चाहिए।

इसके अलावा, आप selectऔरtext इनपुट का उपयोग कर सकते हैं।

Answer 4

मुख्य समस्या कर्सर की स्थिति निर्धारित करने के लिए है। यह किया जा सकता है उदा। का उपयोग करते हुए निम्नलिखित function:

function getCaret(el) { 
    var pos = -1; 
    if (el.selectionStart) { 
     pos = el.selectionStart; 
    } 
    else if (document.selection) { 
     el.focus();   
     var r = document.selection.createRange(); 
     if (r != null) { 
      var re = el.createTextRange(); 
      var rc = re.duplicate(); 
      re.moveToBookmark(r.getBookmark()); 
      rc.setEndPoint('EndToStart', re);  
      pos = rc.text.length; 
     } 
    } 
    return pos; 
} 

अब आप कुंजी दबाएँ के लिए एक ईवेंट हैंडलर स्थापित करें और देखें कि क्या दबाया कुंजी पाठ क्षेत्र के मूल्य के अपरिवर्तनीय हिस्सा अंदर था कर सकते हैं। अगर वहां था तो ईवेंट हैंडलर झूठा लौटाता है, अन्यथा सच है। यह व्यवहार एक साधारण वस्तु में लपेटा जा सकता है:

function Input(id, immutableText) { 
    this.el = document.getElementById(id); 
    this.el.value = immutableText; 
    this.immutableText = immutableText; 
    this.el.onkeypress = keyPress(this); 
}  
function keyPress(el) { 
    return function() { 
     var self = el; 
     return getCaret(self.el) >= self.immutableText.length; 
    } 
}  
Input.prototype.getUserText = function() { 
    return this.el.value.substring(this.immutableText.length); 
}; 
var input = new Input("ta", "Enter your name: "); 
var userText = input.getUserText(); 

आप jsFiddle पर यह जांच कर सकते हैं (Firefox या क्रोम का उपयोग करें)।

Answer 5

आप इनपुट फ़ील्ड के शीर्ष पर पाठ को उस स्थिति में रख सकते हैं जैसे यह अंदर है। कुछ इस तरह:

<input type="text" name="year" style="width:3.5em;padding-left:1.5em;font:inherit"><span style="margin-left:-3em;margin-right:10em;">19</span> 

इस तरह आप अपने इनपुट क्षेत्र "19" जो संपादित नहीं किया जा सकता है के साथ शुरू होगा, और उपयोगकर्ता इसके पीछे जानकारी जोड़ सकते हैं।

असल में आप जो करते हैं वह इनपुट फ़ील्ड को एक निश्चित चौड़ाई पर सेट करता है, ताकि आप यह जान सकें कि इसमें आपके टेक्स्ट के साथ अवधि कितनी नकारात्मक मार्जिन-बाएं है ताकि इसे ठीक से शुरू किया जा सके इनपुट क्षेत्र।

आपको अपने शेष सीएसएस के आधार पर अवधि के मार्जिन-बाएं के साथ परेशान होना पड़ सकता है।

फिर यह सुनिश्चित करने के लिए कि उपयोगकर्ता आपके टेक्स्ट के बाद टाइपिंग शुरू कर रहा है और इसके अंतर्गत नहीं, इनपुट फ़ील्ड में पेडिंग-बाएं भी जोड़ रहा है।

फ़ॉन्ट: उत्तराधिकारी यह सुनिश्चित करना चाहिए कि उपयोगकर्ता द्वारा टाइप किया गया आपका टेक्स्ट और टेक्स्ट दोनों एक ही फ़ॉन्ट में हैं।

और यदि आप इस इनपुट फ़ील्ड के दाईं ओर कुछ भी रखना चाहते हैं, तो अपने टेक्स्ट के साथ अवधि के लिए मार्जिन-दाएं जोड़ें, अन्यथा अन्य सामग्री आपके इनपुट फ़ील्ड पर भी चलना शुरू हो सकती है।