2012-03-19 15 views
7

उदाहरण के लिए मेरे पास एक टेक्स्टबॉक्स है, मैं 12000 में प्रवेश कर रहा हूं और मैं इसे टेक्स्टबॉक्स में 12,000 की तरह दिखाना चाहता हूं, मैं यह कैसे करूँगा? एचटीएमएल का उपयोग कर पाठ बॉक्समैं अपने एचटीएमएल फॉर्म में हजारों विभाजक कैसे जोड़ूं

उत्तर

2

में मदद करता है यह शायद एक बुरा विचार ...

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset= "utf-8"> 
<title>Comma Thousands Input</title> 
<style> 
label, input, button{font-size:1.25em} 
</style> 
<script> 
// insert commas as thousands separators 
function addCommas(n){ 
    var rx= /(\d+)(\d{3})/; 
    return String(n).replace(/^\d+/, function(w){ 
     while(rx.test(w)){ 
      w= w.replace(rx, '$1,$2'); 
     } 
     return w; 
    }); 
} 
// return integers and decimal numbers from input 
// optionally truncates decimals- does not 'round' input 
function validDigits(n, dec){ 
    n= n.replace(/[^\d\.]+/g, ''); 
    var ax1= n.indexOf('.'), ax2= -1; 
    if(ax1!= -1){ 
     ++ax1; 
     ax2= n.indexOf('.', ax1); 
     if(ax2> ax1) n= n.substring(0, ax2); 
     if(typeof dec=== 'number') n= n.substring(0, ax1+dec); 
    } 
    return n; 
} 
window.onload= function(){ 
    var n1= document.getElementById('number1'), 
    n2= document.getElementById('number2'); 
    n1.value=n2.value=''; 

    n1.onkeyup= n1.onchange=n2.onkeyup=n2.onchange= function(e){ 
     e=e|| window.event; 
     var who=e.target || e.srcElement,temp; 
     if(who.id==='number2') temp= validDigits(who.value,2); 
     else temp= validDigits(who.value); 
     who.value= addCommas(temp); 
    } 
    n1.onblur= n2.onblur= function(){ 
     var temp=parseFloat(validDigits(n1.value)), 
     temp2=parseFloat(validDigits(n2.value)); 
     if(temp)n1.value=addCommas(temp); 
     if(temp2)n2.value=addCommas(temp2.toFixed(2)); 
    } 
} 
</script> 
</head> 
<body> 
<h1>Input Thousands Commas</h1> 
<div> 
<p> 
<label> Any number <input id="number1" value=""></label> 
<label>2 decimal places <input id="number2" value=""></label> 
</p></div> 
</body> 
</html> 
+0

धन्यवाद लेकिन आप क्यों कहते हैं कि यह शायद एक बुरा विचार है? – dames

+0

यह एक बुरा विचार है क्योंकि यह सर्वर पर सबमिट किए गए पाठ को बदलता है। – David

2

उपयोग कर सकते हैं मैं मूल्य स्वरूपण एक अल्पविराम शामिल करने के लिए नहीं की सिफारिश करेंगे इम। सबमिट किए जाने के बाद एक स्ट्रिंग मान (12,000) की तुलना में एक पूर्णांक मान (12000) से निपटना बहुत आसान होगा।

हालांकि यदि आप मान को स्वरूपित करने पर निश्चित हैं, तो @achusonline की अनुशंसा की गई है, तो मैं मान को मास्क कर दूंगा।

http://digitalbush.com/projects/masked-input-plugin/

+0

वास्तव में "बहुत आसान के साथ निपटने के लिए ..."? मेरा मतलब है कि स्वरूपण अलग करना वाकई बहुत आसान है। बहुभाषी दर्शकों के लिए स्वरूपण से निपटना मुश्किल है। लेकिन, यदि आप क्लाइंट में स्वरूपण जोड़ने जा रहे हैं, तो सबमिट पर इसे अलग करना मामूली है। –

10

फिर this

function addCommas(nStr) 
{ 
    nStr += ''; 
    x = nStr.split('.'); 
    x1 = x[0]; 
    x2 = x.length > 1 ? '.' + x[1] : ''; 
    var rgx = /(\d+)(\d{3})/; 
    while (rgx.test(x1)) { 
     x1 = x1.replace(rgx, '$1' + ',' + '$2'); 
    } 
    return x1 + x2; 
} 

की तरह कुछ का प्रयास करें ताकि

<input type="text" id="txtBox" onchange="return addCommas(this.value)" /> 

आशा की तरह अपने बक्सें पर इसका इस्तेमाल: यहाँ जो इस परिणाम प्राप्त करने के लिए उपयोगी होगा एक jQuery प्लगइन है जो

+0

लाखों दोस्तों का धन्यवाद !! अंगूठे ऊपर @ मार्क वाल्टर्स – dames

+1

भविष्य के पाठकों के लिए, ध्यान रखें कि यह इनपुट 'प्रकार = "संख्या" के साथ विफल रहता है क्योंकि एचटीएमएल 5 संख्या फ़ील्ड अल्पविराम –

+0

को @DarrenSweeney के रूप में स्वीकार नहीं कर सकता है क्योंकि 'संख्या' अल्पविराम स्वीकार नहीं करता है। लेकिन 'type =" tel "' एक चाल करेगा –

6

jQuery autoNumeric plugin का उपयोग करें:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Input with separator</title> 
    <script type="text/javascript" src="jquery-1.11.0.js"></script> 
    <script type="text/javascript" src="autoNumeric.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $("#myinput").autoNumeric(
     'init', {aSep: ',', mDec: '0', vMax: '99999999999999999999999999'} 
    ); 
    }); 
    </script> 
</head> 
<body> 
    <input id="myinput" name="myinput" type="text" /> 
</body> 
</html>