टेक्स्ट टेक्स्ट को 3 क्षेत्रों में विभाजित करें

मैं अपने टेक्स्ट बॉक्स को तीन क्षेत्रों में विभाजित करना चाहता हूं उदाहरण के लिए: मैं मूल्यों को 951-05-8765456 जैसे प्रदर्शित करना चाहता हूं। क्या 3 स्थानों के बाद डिफ़ॉल्ट रूप से "-" प्रदर्शित करने का कोई तरीका है और इसलिए जब उपयोगकर्ता मान में प्रवेश करता है तो इसे स्वचालित रूप से विभाजित किया जाएगा। मैं चाहता हूं कि मेरा टेक्स्ट बॉक्स छवि में Splitted Text Box टेक्स्ट टेक्स्ट को 3 क्षेत्रों में विभाजित करें

स्रोत

2013-12-17 BlackPOP

इन नकाबपोश आदानों के रूप में जाना जाता है:

Mask Plugin

आप इस प्रकार अपने पाठ बॉक्स के लिए इस प्लगइन का उपयोग कर सकते हैं। यहां एक jQuery प्लगइन है - http://digitalbush.com/projects/masked-input-plugin/ – Prasanth

आप इस प्लगइन का उपयोग कर सकते हैं http://igorescobar.github.io/jQuery-Mask-Plugin/ – Satpal

मूल रूप से आप केवल सीएसएस के साथ ऐसा नहीं कर सकते तो आप इस jQuery प्लगइन का उपयोग कर सकते हैं और आप इसे आसानी से कर सकते हैं। जीयूआई देव में

$(".TEXT_BOX_CLASS").mask("9999/99999/99999");

स्रोत

2013-12-17 11:34:47 Parixit

प्रसंंथ पहले से ही इस लिंक को टिप्पणी के रूप में पोस्ट कर चुके हैं – Satpal

@Satpal मैंने पहले से ही उस प्लगइन का उपयोग किया है, इसलिए मैंने अभी जवाब के रूप में पोस्ट किया है। केवल सीएसएस का उपयोग करने का कोई और तरीका नहीं है। इसलिए मैंने जवाब पोस्ट करने के लिए प्रेरित किया। – Parixit

आपको 3 टेक्स्ट का उपयोग करने की आवश्यकता है 4/5/5 की तरह सीएसएस के साथ अधिकतम लम्बाई विशेषता वाले बॉक्स, और सीएसएस का उपयोग करके आप नीचे सीमा को छोड़कर टेक्स्टबॉक्स की सीमा को हटा सकते हैं।

<input type="text" maxlength="4" class="Split" tabindex="1">/ 
<input type="text" maxlength="5" class="Split" tabindex="2">/ 
<input type="text" maxlength="5" class="Split" tabindex="3">

सीएसएस:

.Split{ 
    border:none; 
    border-bottom: 1px solid black; 
    width:50px; 
}

डेमो: http://jsfiddle.net/juN9t/1/

स्रोत

2013-12-17 11:32:37

जो सही उत्तर नहीं है दोस्त .... इसके बजाय वह AJAX –

का उपयोग करेगा JQuery इसका उपयोग किया जा सकता है। इसलिए एक इनपुट फ़ील्ड का उपयोग '.split()' और '.join()' विधियों के साथ किया जा सकता है। – AfromanJ

@ रोनी, मैंने ओपी परिणाम प्राप्त करने के लिए एचटीएमएल और सीएसएस का उपयोग किया है। –

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <style type="text/css"> 

    </style> 
</head> 
<body> 
<input type="text" class="mynum" value="" /> 

<script type="text/javascript"> 


    $('.mynum').keydown(function() { 
     var value = $('.mynum').val(); 
     var len = value.length;   
     if (len == 4) 
      value += '/'; 
     if (len == 10) 
      value += '/'; 
     if (len == 16) 
      return false; 
     $('.mynum').val(value); 
    }); 



</script> 

</body> 
</html>

स्रोत

2013-12-17 11:43:48

टेक्स्ट टेक्स्ट को 3 क्षेत्रों में विभाजित करें

उत्तर

संबंधित मुद्दे