ฉันได้เห็นว่าเบราว์เซอร์บางตัวแปลinput type="number"สัญกรณ์ตัวเลข

ตอนนี้ในช่องที่แอปพลิเคชันของฉันแสดงพิกัดลองจิจูดและละติจูดฉันจะได้สิ่งต่างๆเช่น "51,983" ซึ่งควรเป็น "51.982559" วิธีแก้ปัญหาของฉันคือใช้input type="text"แทน แต่ฉันต้องการใช้การป้อนตัวเลขที่มีการแสดงทศนิยมที่ถูกต้อง

มีวิธีบังคับให้เบราว์เซอร์ใช้จุดทศนิยมในการป้อนตัวเลขโดยไม่คำนึงถึงการตั้งค่าภายในฝั่งไคลเอ็นต์หรือไม่

(มันไปโดยไม่บอกว่าในแอปพลิเคชันของฉันฉันแก้ไขสิ่งนี้ที่ฝั่งเซิร์ฟเวอร์อยู่แล้ว แต่ในการตั้งค่าของฉันฉันต้องการให้มันถูกต้องในฝั่งไคลเอ็นต์ด้วย (เนื่องจาก JavaScript บางตัว))

ขอบคุณล่วงหน้า.

UPDATE ณ ตอนนี้การตรวจสอบใน Chrome เวอร์ชัน 28.0.1500.71 บน Windows 7 การป้อนตัวเลขไม่ยอมรับทศนิยมที่จัดรูปแบบด้วยลูกน้ำ คำแนะนำที่เสนอพร้อมstepแอตทริบิวต์ดูเหมือนจะไม่ได้ผล

http://jsfiddle.net/AsJsj/

ปัจจุบัน Firefox ให้เกียรติภาษาขององค์ประกอบ HTML ที่อินพุตอยู่ ตัวอย่างเช่นลองใช้ซอนี้ใน Firefox:

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/1/

คุณจะเห็นว่าตัวเลขเป็นภาษาอาหรับและใช้ลูกน้ำเป็นตัวคั่นทศนิยมซึ่งเป็นกรณีของภาษาอาหรับ เพราะนี่คือแท็กจะได้รับแอตทริบิวต์BODYlang="ar-EG"

ต่อไปลองอันนี้:

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/2/

อันนี้แสดงด้วยจุดเป็นตัวคั่นทศนิยมเนื่องจากอินพุตถูกรวมไว้ในDIVแอตทริบิวต์ที่lang="en-US"กำหนด

ดังนั้นวิธีแก้ปัญหาที่คุณอาจใช้คือห่ออินพุตตัวเลขของคุณด้วยองค์ประกอบคอนเทนเนอร์ที่ตั้งค่าให้ใช้วัฒนธรรมที่ใช้จุดเป็นตัวคั่นทศนิยม

ด้วยขั้นตอนแอตทริบิวต์ที่ระบุความแม่นยำทศนิยมที่คุณต้องการและlangแอตทริบิวต์ [ซึ่งมีการตั้งค่าสถานที่รูปแบบทศนิยมที่มีระยะเวลา ], HTML5 การป้อนข้อมูลที่เป็นตัวเลขของคุณจะยอมรับทศนิยม เช่น. เพื่อรับค่าเช่น 10.56; ฉันหมายถึงเลขทศนิยม 2 ตำแหน่งให้ทำดังนี้

<input type="number" step="0.01" min="0" lang="en" value="1.99">

คุณสามารถระบุแอตทริบิวต์สูงสุดสำหรับค่าสูงสุดที่อนุญาตเพิ่มเติมได้

แก้ไข เพิ่มแอตทริบิวต์ langให้กับองค์ประกอบอินพุตด้วยค่าโลแคลที่จัดรูปแบบทศนิยมด้วยจุดแทนลูกน้ำ

ตามข้อมูลจำเพาะคุณสามารถใช้anyเป็นค่าของstepแอตทริบิวต์:

<input type="number" step="any">

ใช้ lang แอตทริบิวต์กับอินพุต สถานที่บนเว็บแอปของฉัน fr_FR, lang = "en_EN" บนหมายเลขอินพุตและฉันสามารถใช้ลูกน้ำหรือจุดได้โดยไม่แยแส Firefox จะแสดงจุดเสมอ Chrome จะแสดงลูกน้ำ แต่ทั้งสองแยกกันใช้ได้

น่าเสียดายที่ความครอบคลุมของช่องป้อนข้อมูลนี้ในเบราว์เซอร์สมัยใหม่นั้นต่ำมาก:

http://caniuse.com/#feat=input-number

ดังนั้นฉันขอแนะนำให้คาดหวังทางเลือกและพึ่งพาอินพุตที่โหลดโดยใช้โปรแกรมจำนวนมาก [type = text] เพื่อทำงานนี้จนกว่าฟิลด์จะได้รับการยอมรับโดยทั่วไป

จนถึงขณะนี้มีเพียง Chrome, Safari และ Opera เท่านั้นที่มีการใช้งานที่เป็นระเบียบ แต่เบราว์เซอร์อื่น ๆ ทั้งหมดนั้นมีปัญหา บางคนดูเหมือนจะไม่รองรับทศนิยมด้วยซ้ำ (เช่น BB10)!

ฉันไม่รู้ว่าสิ่งนี้ช่วยได้หรือไม่ แต่ฉันสะดุดที่นี่เมื่อค้นหาปัญหาเดียวกันนี้จากมุมมองอินพุตเท่านั้น(เช่นฉันสังเกตเห็นว่าฉัน<input type="number" />ยอมรับทั้งลูกน้ำและจุดเมื่อพิมพ์ค่า แต่สิ่งหลังเท่านั้นคือ ถูกผูกไว้กับโมเดล angularjs ที่ฉันกำหนดให้กับอินพุต) ดังนั้นฉันจึงแก้ไขโดยการจดคำสั่งด่วนนี้:

.directive("replaceComma", function() {
    return {
        restrict: "A",
        link: function(scope, element) {
            element.on("keydown", function(e) {
                if(e.keyCode === 188) {
                    this.value += ".";
                    e.preventDefault();
                }
            });
        }
    };
});

จากนั้นใน html ของฉันเพียงแค่: <input type="number" ng-model="foo" replace-comma />จะแทนที่ด้วยเครื่องหมายจุลภาคด้วยจุดในทันทีเพื่อป้องกันไม่ให้ผู้ใช้ป้อนตัวเลขที่ไม่ถูกต้อง (จากมุมมองของจาวาสคริปต์ไม่ใช่ตัวเลขที่อยู่!) ไชโย

ฉันพบบทความในบล็อกซึ่งดูเหมือนจะอธิบายบางอย่างที่เกี่ยวข้อง:
ประเภทอินพุต HTML5 = ตัวเลขและทศนิยม / ลอยใน Chrome

สรุป:

• stepช่วยในการกำหนดโดเมนของค่าที่ถูกต้อง
• ค่าเริ่มต้นstepคือ1
• ดังนั้นโดเมนเริ่มต้นจึงเป็นจำนวนเต็ม (ระหว่างminและmaxรวมถ้ากำหนด)

ฉันจะถือว่ามันปะติดปะต่อกับความคลุมเครือของการใช้ลูกน้ำเป็นตัวคั่นหลักพันเทียบกับลูกน้ำเป็นจุดทศนิยมและที่51,983จริงแล้วของคุณมีการแยกวิเคราะห์แปลก ๆ ห้าหมื่นหนึ่งพันเก้าร้อยแปดสาม

เห็นได้ชัดว่าคุณสามารถใช้step="any"เพื่อขยายโดเมนเป็นตัวเลขที่มีเหตุผลทั้งหมดในช่วง แต่ฉันไม่ได้ลองด้วยตัวเอง สำหรับละติจูดและลองจิจูดฉันใช้สำเร็จแล้ว:

<input name="lat" type="number" min="-90.000000" max="90.000000" step="0.000001">
<input name="lon" type="number" min="-180.000000" max="180.000000" step="0.000001">

มันอาจจะไม่สวย แต่ก็ใช้ได้

เท่าที่ฉันเข้าใจ HTML5 input type="numberจะส่งคืนinput.valueเป็นไฟล์string.

เห็นได้ชัดว่าinput.valueAsNumberส่งกลับค่าปัจจุบันเป็นตัวเลขทศนิยม คุณสามารถใช้สิ่งนี้เพื่อส่งคืนค่าที่คุณต้องการ

ดูhttp://diveintohtml5.info/forms.html#type-number

คุณได้พิจารณาใช้ Javascript สำหรับสิ่งนี้หรือไม่?

$('input').val($('input').val().replace(',', '.'));

ทางเลือกหนึ่งคือjavascript parseFloat()... อย่าแยกวิเคราะห์ a " text chain" --> 12.3456พร้อมชี้ไปที่ int ... 123456(int ลบจุด) แยกวิเคราะห์ห่วงโซ่ข้อความไปยัง FLOAT ...

ในการส่ง coords นี้ไปยังเซิร์ฟเวอร์ให้ทำเช่นนี้โดยการส่ง text chain HTTPส่งเท่านั้นTEXT

ในไคลเอนต์อย่าแยกวิเคราะห์ Coords อินพุตด้วย " int" ทำงานกับสตริงข้อความ

หากคุณพิมพ์สายใน html ด้วย php หรือคล้ายกัน ... ลอยเป็นข้อความและพิมพ์เป็น html

1) 51,983 เป็นหมายเลขประเภทสตริงไม่ยอมรับลูกน้ำ

ดังนั้นคุณควรตั้งเป็นข้อความ

<input type="text" name="commanumber" id="commanumber" value="1,99" step='0.01' min='0' />

แทนที่ด้วย.

และเปลี่ยนแอตทริบิวต์ประเภทเป็นตัวเลข

$(document).ready(function() {
    var s = $('#commanumber').val().replace(/\,/g, '.');   
    $('#commanumber').attr('type','number');   
    $('#commanumber').val(s);   
});

ตรวจสอบhttp://jsfiddle.net/ydf3kxgu/

หวังว่านี่จะช่วยแก้ปัญหาของคุณได้

ใช้รูปแบบ

<input 
       type="number" 
       name="price"
       pattern="[0-9]+([\.,][0-9]+)?" 
       step="0.01"
       title="This should be a number with up to 2 decimal places."
>

โชคดี

ฉันได้เขียนโค้ดที่กำหนดเองเพื่อทำสิ่งนี้

หากคุณต้องการแทนที่,ด้วย.ให้ลบฟังก์ชันtranslate_decimalsออกทั้งหมด

var input = document.querySelector('input[role="custom-number"]');
var bincr = document.querySelector('button[role="increment"]');
var bdecr = document.querySelector('button[role="decrement"]');

function translate_decimals(side = 0)
{
	input.value = (side == ',' ? input.value.replace('.',',') : input.value.replace(',','.'));
}
translate_decimals(',');

bincr.addEventListener('click', ()=>{
	if (input.hasAttribute('max'))
	{
		if (input.value.substr(0,input.getAttribute('max').length) == input.getAttribute('max').substr(0,input.getAttribute('max').length))
		{
			return;
		}
		else
		{
			translate_decimals('.');
			let temp = input.value;
			input.value = "";
			input.value = (input.hasAttribute('step') ? (parseFloat(temp) + parseFloat(input.getAttribute('step'))) : temp++);
			translate_decimals(',');
		}
	}
});

bdecr.addEventListener('click', ()=>{
	if (input.hasAttribute('min'))
	{
		if (input.value.substr(0,input.getAttribute('min').length) == input.getAttribute('min').substr(0,input.getAttribute('min').length))
		{
			return;
		}
		else
		{
			translate_decimals('.');
			input.value = (input.hasAttribute('step') ? (input.value - input.getAttribute('step')) : input.value--);
			translate_decimals(',');
		}
	}
});

/* styling increment & decrement buttons */
button[role="increment"],
button[role="decrement"] {
	width:32px;
}

<input type="text" role="custom-number" step="0.01" min="0" max="0" lang="en" value="1.99">
<button role="increment">+</button>
<button role="decrement">-</button>

ฉันต้องการให้แน่ใจว่ายังสามารถป้อนค่าด้วยลูกน้ำแทนที่จะใช้จุดเป็นตัวคั่นทศนิยม นี่ดูเหมือนจะเป็นปัญหาเก่าแก่ ข้อมูลพื้นฐานสามารถพบได้ตามลิงค์เหล่านี้:

• https://www.slightfuture.com/webdev/html5-input-number-localization.html
• https://codepen.io/aminimalanimal/full/bdOzRG

ในที่สุดฉันก็แก้ไขได้ด้วย jQuery เล็กน้อย การแทนที่เครื่องหมายจุลภาคด้วยจุด onChange ดูเหมือนว่าจะทำงานได้ดีใน Firefox, Chrome และ Safari ล่าสุด

$('input[type=number]').each(function () {

  $(this).change(function () {

    var $replace = $(this).val().toString().replace(/,/g, '.');

    $(this).val($replace);

  })

});

แอตทริบิวต์ขั้นตอน HTML

<input type="number" name="points" step="3">

ตัวอย่าง: ถ้า step = "3" ตัวเลขทางกฎหมายอาจเป็น -3, 0, 3, 6 เป็นต้น

เคล็ดลับ: สามารถใช้แอตทริบิวต์ step ร่วมกับแอตทริบิวต์ max และ min เพื่อสร้างช่วงของค่าทางกฎหมาย

หมายเหตุ:แอ็ตทริบิวต์ step ทำงานกับประเภทอินพุตต่อไปนี้: number, range, date, datetime, datetime-local, month, time และ week