Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

input fält med separation varje 1000 del

1
Skriv svar
Permalänk
Medlem
●

input fält med separation varje 1000 del

Nedan har ni koden till ett fungerade script. Tack ePoint för hjälpen! Och alla andra som dragit sitt
strå till stacken genom research. Ha en bra dag gott folk!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script>
$("document").ready(function(){
	$(".separator").keyup(function(){
		var val = $(this).val().replace(/ /g,"");
		var newVal = val;
		while (newVal.split(" ")[0].length > 3) {
			var splitted = newVal.split(" ")[0];
			var endstr = newVal.substring(splitted.length);
			var tempNewVal = getThousand(splitted) + endstr;
			newVal = tempNewVal;
		}
		$(this).val(newVal)
	});
});
function getThousand(str) {
	if (str.length > 3)
		return str.substring(0, str.length - 3) + " " + str.substring(str.split(" ")[0].length - 3);
	return str;
}
</script>
</head>
<body>
<input type="text" class="separator" />
</body>
</html>

Fråga:

Hej.

Har stött på ett problem på jobbet. Jag försöker göra så varje 1000del i ett input fält blir separerat
med ett mellanslag. Har googlat runt lite på olika javascript, men hittar ej något som fungerar.

Någon som har ett bra tips på ett enkelt sätt?

Mera dataljer hur jag menar:

ex1: 100000 -> 100 000
ex2: 200000000 -> 200 000 000

Att direkt i input fältet ska detta ske, inte efter man klickat på ex submit.
För att det ska bli så lättläst som möjligt, tack så mycket för alla tips !

Senast redigerat Fick ett svar som fungerar
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Detta kanske kan vara något:
http://digitalbush.com/projects/masked-input-plugin/

Visa signatur

...

Redigera
Citera flera Citera
Permalänk
Medlem
●

Mjaa mjoo nästan men inte riktigt. vill bara ha det cleant att den lägger in ett mellanrum mellan siffrorna.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Nordeas inloggning gör detta på fältet "svarskod". Javascriptet för detta kan ses om man visar sidans html-kod.
https://internetbanken.privat.nordea.se/nsp/engine

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av iXam:

Nordeas inloggning gör detta på fältet "svarskod". Javascriptet för detta kan ses om man visar sidans html-kod.
https://internetbanken.privat.nordea.se/nsp/engine

Gå till inlägget

Problemet med den lösningen är ju att den bara lägger till ett mellanslag efter var tredje tecken, det jag antar är att TS vill är att tex tio miljoner => 10000000 ska bli 10 000 000. Jag antar att man kan göra någon version av deras script men att du kör det på strängen baklänges. Javascript är inte min starka sida, men att vända på strängen efter varje input och lägga till mellanslag var tredje tecken, sen vända tillbaka den borde fungera?

Redigera
Citera flera Citera
Permalänk
Medlem
●

http://krijnhoetmer.nl/stuff/javascript/number-format/

window.onload = function() {
 if (document.getElementById) {
  document.getElementById('txt').onkeyup = function() {
   document.getElementById('en').innerHTML = number_format(this.value, 2, '.', ',');
   document.getElementById('fr').innerHTML = number_format(this.value, 2, ',', ' ');
   document.getElementById('du').innerHTML = number_format(this.value, 2, ',', '.');
  }
 }
}

/* Made by Mathias Bynens <http://mathiasbynens.be/> */
function number_format(a, b, c, d) {
 a = Math.round(a * Math.pow(10, b)) / Math.pow(10, b);
 e = a + '';
 f = e.split('.');
 if (!f[0]) {
  f[0] = '0';
 }
 if (!f[1]) {
  f[1] = '';
 }
 if (f[1].length < b) {
  g = f[1];
  for (i=f[1].length + 1; i <= b; i++) {
   g += '0';
  }
  f[1] = g;
 }
 if(d != '' && f[0].length > 3) {
  h = f[0];
  f[0] = '';
  for(j = 3; j < h.length; j+=3) {
   i = h.slice(h.length - j, h.length - j + 3);
   f[0] = d + i +  f[0] + '';
  }
  j = h.substr(0, (h.length % 3 == 0) ? 3 : (h.length % 3));
  f[0] = j + f[0];
 }
 c = (b <= 0) ? '' : c;
 return f[0] + c + f[1];
}
Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Marwelln:

http://krijnhoetmer.nl/stuff/javascript/number-format/

window.onload = function() {
 if (document.getElementById) {
  document.getElementById('txt').onkeyup = function() {
   document.getElementById('en').innerHTML = number_format(this.value, 2, '.', ',');
   document.getElementById('fr').innerHTML = number_format(this.value, 2, ',', ' ');
   document.getElementById('du').innerHTML = number_format(this.value, 2, ',', '.');
  }
 }
}

/* Made by Mathias Bynens <http://mathiasbynens.be/> */
function number_format(a, b, c, d) {
 a = Math.round(a * Math.pow(10, b)) / Math.pow(10, b);
 e = a + '';
 f = e.split('.');
 if (!f[0]) {
  f[0] = '0';
 }
 if (!f[1]) {
  f[1] = '';
 }
 if (f[1].length < b) {
  g = f[1];
  for (i=f[1].length + 1; i <= b; i++) {
   g += '0';
  }
  f[1] = g;
 }
 if(d != '' && f[0].length > 3) {
  h = f[0];
  f[0] = '';
  for(j = 3; j < h.length; j+=3) {
   i = h.slice(h.length - j, h.length - j + 3);
   f[0] = d + i +  f[0] + '';
  }
  j = h.substr(0, (h.length % 3 == 0) ? 3 : (h.length % 3));
  f[0] = j + f[0];
 }
 c = (b <= 0) ? '' : c;
 return f[0] + c + f[1];
}
Gå till inlägget

i princip så, men ska ske i inputfältet direkt..

Ev har jag hittat en lösning, ska prova först så laddar jag upp allt om de blir goda resultat

Redigera
Citera flera Citera
Permalänk
Medlem
●
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script>
$("document").ready(function(){
	$(".separator").keyup(function(){
		var val = $(this).val().replace(/ /g,"");
		var newVal = val;
		while (newVal.split(" ")[0].length > 3) {
			var splitted = newVal.split(" ")[0];
			var endstr = newVal.substring(splitted.length);
			var tempNewVal = getThousand(splitted) + endstr;
			newVal = tempNewVal;
		}
		$(this).val(newVal)
	});
});
function getThousand(str) {
	if (str.length > 3)
		return str.substring(0, str.length - 3) + " " + str.substring(str.split(" ")[0].length - 3);
	return str;
}
</script>
</head>
<body>
<input type="text" class="separator" />
</body>
</html>
Visa signatur

"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." - Brian W. Kernighan

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

http://tympanus.net/codrops/2010/01/03/prettynumber-a-jquery-...
Den kanske?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Fungerade perfekt!
tack!

Skrivet av ePoint: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script>
$("document").ready(function(){
	$(".separator").keyup(function(){
		var val = $(this).val().replace(/ /g,"");
		var newVal = val;
		while (newVal.split(" ")[0].length > 3) {
			var splitted = newVal.split(" ")[0];
			var endstr = newVal.substring(splitted.length);
			var tempNewVal = getThousand(splitted) + endstr;
			newVal = tempNewVal;
		}
		$(this).val(newVal)
	});
});
function getThousand(str) {
	if (str.length > 3)
		return str.substring(0, str.length - 3) + " " + str.substring(str.split(" ")[0].length - 3);
	return str;
}
</script>
</head>
<body>
<input type="text" class="separator" />
</body>
</html>
Gå till inlägget
Redigera
Citera flera Citera
1
Skriv svar