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

จะปกปิดความยุ่งเหยิงทั้งหมดนี้ด้วยจุดและลูกน้ำได้อย่างไร

การค้นพบของฉัน:

Chrome บนเดสก์ท็อป

• ประเภทอินพุต = หมายเลข
• ผู้ใช้ป้อน "4,55" ในช่องป้อนข้อมูล
• $("#my_input").val(); ส่งคืน "455"
• ฉันไม่สามารถรับค่าที่ถูกต้องจากการป้อนข้อมูล

เดสก์ท็อป Firefox

• ประเภทอินพุต = หมายเลข
• ผู้ใช้ป้อน "4,55" ในช่องป้อนข้อมูล
• $("#my_input").val(); ผลตอบแทน "4,55"
• ไม่เป็นไรฉันสามารถแทนที่ลูกน้ำด้วยจุดและทำให้ค่าลอยถูกต้องได้

เบราว์เซอร์ Android

• ประเภทอินพุต = หมายเลข
• ผู้ใช้ป้อน "4,55" ในช่องป้อนข้อมูล
• เมื่ออินพุตสูญเสียโฟกัสค่าจะถูกตัดให้เหลือ "4"
• สร้างความสับสนให้กับผู้ใช้

Windows Phone 8

• ประเภทอินพุต = หมายเลข
• ผู้ใช้ป้อน "4,55" ในช่องป้อนข้อมูล
• $("#my_input").val(); ผลตอบแทน "4,55"
• ไม่เป็นไรฉันสามารถแทนที่ลูกน้ำด้วยจุดและทำให้ค่าลอยถูกต้องได้

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

ฉันสามารถแปลงเครื่องหมายจุลภาคเป็นจุด "ทันที" เพื่อเชื่อมโยงเหตุการณ์สำคัญได้หรือไม่มันทำงานกับอินพุตตัวเลขได้หรือไม่

แก้ไข

Currenlty ฉันไม่มีวิธีแก้ปัญหาวิธีรับค่า float (เป็นสตริงหรือตัวเลข) จากอินพุตที่กำหนดประเภทเป็นตัวเลข หาก enduser ป้อน "4,55" Chrome จะส่งกลับ "455" เสมอ Firefox จะส่งคืน "4,55" ซึ่งก็ใช้ได้

นอกจากนี้มันค่อนข้างน่ารำคาญที่ใน Android (โปรแกรมจำลอง 4.2 ที่ทดสอบแล้ว) เมื่อฉันป้อน "4,55" ในช่องป้อนข้อมูลและเปลี่ยนโฟกัสไปที่อื่นหมายเลขที่ป้อนจะถูกตัดทอนเป็น "4"

ผมคิดว่าสิ่งที่ขาดหายไปในคำตอบข้างต้นเป็นความจำเป็นที่จะระบุค่าที่แตกต่างกันสำหรับแอตทริบิวต์ที่มีค่าเริ่มต้นของstep 1หากคุณต้องการให้อัลกอริธึมการตรวจสอบความถูกต้องของอินพุตอนุญาตค่าทศนิยมให้ระบุขั้นตอนตามนั้น

ตัวอย่างเช่นฉันต้องการเงินเป็นจำนวนเงินดังนั้นฉันจึงระบุขั้นตอนดังนี้:

 <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.">

ไม่มีอะไรผิดปกติในการใช้ jQuery เพื่อดึงค่า แต่คุณจะพบว่าการใช้ DOM API โดยตรงเพื่อรับvalidity.validคุณสมบัติขององค์ประกอบนั้นมีประโยชน์

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

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

• jsFiddle

TL; DR: ตั้งเป็นแอตทริบิวต์เป็นค่าจุดลอยตัวเพราะมันเริ่มต้นที่step1

หมายเหตุ : ลูกน้ำไม่ได้ตรวจสอบความถูกต้องสำหรับฉัน แต่ฉันสงสัยว่าถ้าฉันตั้งค่าภาษา / ภูมิภาค OS ของฉันเป็นที่อื่นที่ใช้ลูกน้ำเป็นตัวคั่นทศนิยมมันจะใช้ได้ * หมายเหตุในหมายเหตุ *: นั่นไม่ใช่กรณีสำหรับการตั้งค่าภาษา / แป้นพิมพ์ของระบบปฏิบัติการ * เยอรมัน * ใน Ubuntu / Gnome 14.04

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

ฉันได้ระบุตัวเลือกสองสามรายการด้านล่างที่อาจเป็นประโยชน์สำหรับคุณ:

1. การใช้แอตทริบิวต์รูปแบบ

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

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" name="my-num"
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>

หมายเหตุ:การรองรับข้ามเบราว์เซอร์แตกต่างกันไปมาก อาจสมบูรณ์บางส่วนหรือไม่มีอยู่จริง ..

2. การตรวจสอบ JavaScript

คุณสามารถลองผูกการเรียกกลับง่ายๆตัวอย่างเช่นเหตุการณ์onchange (และ / หรือเบลอ ) ที่จะแทนที่เครื่องหมายจุลภาคหรือตรวจสอบความถูกต้องทั้งหมดเข้าด้วยกัน

3. ปิดการใช้งานการตรวจสอบความถูกต้องของเบราว์เซอร์ ##

ประการที่สามคุณสามารถลองใช้แอตทริบิวต์formnovalidateกับอินพุตตัวเลขโดยมีจุดประสงค์เพื่อปิดใช้งานการตรวจสอบความถูกต้องของเบราว์เซอร์สำหรับฟิลด์นั้นทั้งหมดด้วยกัน

<input type="number" formnovalidate />

4. รวมกัน .. ?

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" 
           name="my-num" formnovalidate
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>

การใช้ลูกน้ำหรือจุดสำหรับตัวคั่นทศนิยมนั้นขึ้นอยู่กับเบราว์เซอร์ทั้งหมด เบราว์เซอร์ทำการตัดสินใจโดยพิจารณาจากสถานที่ของระบบปฏิบัติการหรือเบราว์เซอร์หรือบางเบราว์เซอร์ใช้คำแนะนำจากเว็บไซต์ ฉันสร้างแผนภูมิเปรียบเทียบเบราว์เซอร์ที่แสดงให้เห็นว่าเบราว์เซอร์ต่างๆรองรับวิธีการแปลที่แตกต่างกันอย่างไร Safari เป็นเบราว์เซอร์เดียวที่จัดการเครื่องหมายจุลภาคและจุดแทนกันได้

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

ใช้valueAsNumberแทน.val().

อินพุต. valueAsNumber [= ค่า]

ส่งกลับตัวเลขที่แทนค่าของตัวควบคุมฟอร์มถ้ามี มิฉะนั้นจะคืนค่า null
สามารถตั้งค่าเพื่อเปลี่ยนค่า
แสดงข้อยกเว้น INVALID_STATE_ERR หากการควบคุมไม่ได้เป็นแบบวันที่หรือเวลาหรือตัวเลข

ใช้ประเภทข้อความ แต่บังคับให้แสดงแป้นพิมพ์ตัวเลข

<input value="12,4" type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+">

แท็ก inputmode คือทางออก

ฉันไม่พบโซลูชันที่สมบูรณ์แบบ แต่สิ่งที่ดีที่สุดที่ฉันทำได้คือใช้ type = "tel" และปิดใช้งานการตรวจสอบความถูกต้อง html5 (formnovalidate):

<input name="txtTest" type="tel" value="1,200.00" formnovalidate="formnovalidate" />

หากผู้ใช้ใส่เครื่องหมายจุลภาคระบบจะแสดงผลด้วยเครื่องหมายจุลภาคในเบราว์เซอร์สมัยใหม่ทุกตัวที่ฉันลองใช้ (FF, IE, edge, opera, chrome, เดสก์ท็อปซาฟารี, android chrome ล่าสุด)

ปัญหาหลักคือ:

• ผู้ใช้มือถือจะเห็นแป้นพิมพ์โทรศัพท์ซึ่งอาจแตกต่างจากแป้นพิมพ์ตัวเลข
• ที่แย่กว่านั้นแป้นพิมพ์โทรศัพท์อาจไม่มีปุ่มสำหรับลูกน้ำด้วยซ้ำ

สำหรับกรณีการใช้งานของฉันฉันต้อง:

• แสดงค่าเริ่มต้นด้วยเครื่องหมายจุลภาค (firefox ขีดไว้สำหรับ type = number)
• ไม่ล้มเหลวในการตรวจสอบความถูกต้อง html5 (หากมีเครื่องหมายจุลภาค)
• ให้ฟิลด์อ่านตรงตามอินพุต (ด้วยเครื่องหมายจุลภาค)

หากคุณมีข้อกำหนดที่คล้ายกันสิ่งนี้ควรได้ผลสำหรับคุณ

หมายเหตุ:ฉันไม่ชอบการสนับสนุนของแอตทริบิวต์รูปแบบ formnovalidate ดูเหมือนจะทำงานได้ดีกว่ามาก

เมื่อคุณเรียก$("#my_input").val();มันกลับเป็นตัวแปรสตริง ดังนั้นใช้parseFloatและparseIntสำหรับการแปลง เมื่อคุณใช้parseFloatเดสก์ท็อปหรือโทรศัพท์ITSELFเข้าใจความหมายของตัวแปร

และนอกจากนี้คุณยังสามารถแปลง float เป็นสตริงได้โดยใช้toFixedอาร์กิวเมนต์ซึ่งมีจำนวนหลักดังนี้:

var i = 0.011;
var ss = i.toFixed(2); //It returns 0.01

เห็นได้ชัดว่าเบราว์เซอร์ยังคงมีปัญหา (แม้ว่า Chrome และ Firefox Nightly จะทำได้ดี) ฉันมีวิธีแฮ็กสำหรับคนที่ต้องใช้ฟิลด์ตัวเลขจริงๆ (อาจเป็นเพราะลูกศรเล็ก ๆ ที่ช่องข้อความไม่มี)

โซลูชันของฉัน

ฉันเพิ่มตัวkeyupจัดการเหตุการณ์ลงในอินพุตแบบฟอร์มและติดตามสถานะและตั้งค่าเมื่อมันกลับมาถูกต้องอีกครั้ง

JS Snippet บริสุทธิ์ JSFIDDLE

var currentString = '';
var badState = false;
var lastCharacter = null;

document.getElementById("field").addEventListener("keyup",($event) => {
  if ($event.target.value && !$event.target.validity.badInput) {
          currentString = $event.target.value;
  } else if ($event.target.validity.badInput) {
    if (badState && lastCharacter && lastCharacter.match(/[\.,]/) && !isNaN(+$event.key)) {
      $event.target.value = ((+currentString) + (+$event.key / 10));
      badState = false;
    } else {
      badState = true;
    }
  }
  document.getElementById("number").textContent = $event.target.value;
  lastCharacter = $event.key;
});

document.getElementById("field").addEventListener("blur",($event) => {
	if (badState) {
    $event.target.value = (+currentString);
    badState = false;
		document.getElementById("number").textContent = $event.target.value;
  }
});

#result{
  padding: 10px;
  background-color: orange;
  font-size: 25px;
  width: 400px;
  margin-top: 10px;
  display: inline-block;
}

#field{
  padding: 5px;
  border-radius: 5px;
  border: 1px solid grey;
  width: 400px;
}

<input type="number" id="field" keyup="keyUpFunction" step="0.01" placeholder="Field for both comma separators">

<span id="result" >
 <span >Current value: </span>
 <span id="number"></span>
</span>

Angular 9 Snippet

@Directive({
  selector: '[appFloatHelper]'
})
export class FloatHelperDirective {
  private currentString = '';
  private badState = false;
  private lastCharacter: string = null;

  @HostListener("blur", ['$event']) onBlur(event) {
    if (this.badState) {
      this.model.update.emit((+this.currentString));
      this.badState = false;
    }
  }

  constructor(private renderer: Renderer2, private el: ElementRef, private change: ChangeDetectorRef, private zone: NgZone, private model: NgModel) {
    this.renderer.listen(this.el.nativeElement, 'keyup', (e: KeyboardEvent) => {
      if (el.nativeElement.value && !el.nativeElement.validity.badInput) {
        this.currentString = el.nativeElement.value;
      } else if (el.nativeElement.validity.badInput) {
        if (this.badState && this.lastCharacter && this.lastCharacter.match(/[\.,]/) && !isNaN(+e.key)) {
          model.update.emit((+this.currentString) + (+e.key / 10));
          el.nativeElement.value = (+this.currentString) + (+e.key / 10);
          this.badState = false;
        } else {
          this.badState = true;
        }
      }       
      this.lastCharacter = e.key;
    });
  }
  
}

<input type="number" matInput placeholder="Field for both comma separators" appFloatHelper [(ngModel)]="numberModel">

คำแนะนำของฉัน? อย่าใช้ jQuery เลย ฉันมีปัญหาเดียวกับคุณ ฉันพบว่ามัน$('#my_input').val()ให้ผลลัพธ์แปลก ๆ เสมอ

ลองใช้document.getElementById('my_input').valueAsNumberแทน$("#my_input").val();แล้วใช้Number(your_value_retrieved)เพื่อพยายามสร้างตัวเลข ถ้าค่าเป็น NaN คุณก็รู้แน่นอนว่านั่นไม่ใช่ตัวเลข

สิ่งหนึ่งที่ต้องเพิ่มคือเมื่อคุณเขียนตัวเลขบนอินพุตอินพุตจะยอมรับอักขระเกือบทุกตัว (ฉันสามารถเขียนเครื่องหมายยูโรดอลลาร์และอักขระพิเศษอื่น ๆ ทั้งหมดได้) ดังนั้นจึงเป็นการดีที่สุดที่จะดึงค่าโดยใช้.valueAsNumberแทนที่จะใช้ jQuery

โอ้และ BTW ที่ช่วยให้ผู้ใช้ของคุณสามารถเพิ่มความเป็นสากลได้ (เช่น: รองรับจุลภาคแทนจุดเพื่อสร้างตัวเลขทศนิยม) เพียงแค่ปล่อยให้Number()วัตถุสร้างบางสิ่งสำหรับคุณและมันจะปลอดภัยเป็นทศนิยมดังนั้นที่จะพูด

ดูเหมือนว่าคุณต้องการใช้ toLocaleString () กับอินพุตตัวเลขของคุณ

ดูhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleStringสำหรับการใช้งาน

การแปลตัวเลขใน JS ยังครอบคลุมในInternationalization (การจัดรูปแบบตัวเลข "num.toLocaleString ()") ไม่ทำงานสำหรับ chrome