ปิดการใช้งานการเลื่อนบน `<input type = number>"

เป็นไปได้หรือไม่ที่จะปิดใช้งานล้อเลื่อนที่เปลี่ยนหมายเลขในช่องหมายเลขอินพุต ฉันยุ่งกับ CSS เฉพาะ webkit เพื่อลบสปินเนอร์ แต่ฉันต้องการกำจัดพฤติกรรมนี้โดยสิ้นเชิง ฉันชอบใช้type=numberเพราะมันแสดงคีย์บอร์ดที่ดีบน iOS

ป้องกันพฤติกรรมเริ่มต้นของเหตุการณ์ mousewheel บนองค์ประกอบหมายเลขอินพุตตามที่แนะนำโดยผู้อื่น (โดยปกติการเรียก "เบลอ ()" จะไม่ใช่วิธีที่ต้องการในการดำเนินการเนื่องจากจะไม่เป็นไปตามที่ผู้ใช้ต้องการ)

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

โซลูชันสำหรับ jQuery:

// disable mousewheel on a input number field when in focus
// (to prevent Cromium browsers change the value when scrolling)
$('form').on('focus', 'input[type=number]', function (e) {
  $(this).on('wheel.disableScroll', function (e) {
    e.preventDefault()
  })
})
$('form').on('blur', 'input[type=number]', function (e) {
  $(this).off('wheel.disableScroll')
})

(มอบหมายกิจกรรมโฟกัสให้กับองค์ประกอบแบบฟอร์มรอบข้าง - เพื่อหลีกเลี่ยงผู้ฟังเหตุการณ์จำนวนมากซึ่งไม่ดีต่อประสิทธิภาพ)

$(document).on("wheel", "input[type=number]", function (e) {
    $(this).blur();
});

ผู้ฟังเหตุการณ์หนึ่งที่จะปกครองพวกเขาทั้งหมด

สิ่งนี้คล้ายกับคำตอบของ@Simon Perepelitsaใน pure js แต่จะง่ายกว่าเล็กน้อยเนื่องจากทำให้ผู้ฟังเหตุการณ์หนึ่งอยู่ในองค์ประกอบเอกสารและตรวจสอบว่าองค์ประกอบที่โฟกัสเป็นอินพุตตัวเลขหรือไม่:

document.addEventListener("wheel", function(event){
    if(document.activeElement.type === "number"){
        document.activeElement.blur();
    }
});

หากคุณต้องการปิดพฤติกรรมการเลื่อนค่าในบางฟิลด์ แต่ไม่ใช่คนอื่นให้ทำสิ่งนี้แทน:

document.addEventListener("wheel", function(event){
    if(document.activeElement.type === "number" &&
       document.activeElement.classList.contains("noscroll"))
    {
        document.activeElement.blur();
    }
});

ด้วยสิ่งนี้:

<input type="number" class="noscroll"/>

หากอินพุตมีคลาส noscroll จะไม่เปลี่ยนแปลงเมื่อเลื่อนมิฉะนั้นทุกอย่างจะยังคงเหมือนเดิม

ทดสอบที่นี่ด้วย JSFiddle

input = document.getElementById("the_number_input")
input.addEventListener("mousewheel", function(event){ this.blur() })

http://jsfiddle.net/bQbDm/2/

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

ตัวฟังเหตุการณ์ HTML5 สำหรับการเลื่อนป้อนตัวเลข - Chrome เท่านั้น

คุณสามารถใช้แอตทริบิวต์HTML onwheel

ตัวเลือกนี้ไม่มีผลกระทบในการเลื่อนดูองค์ประกอบอื่น ๆ ของหน้า

และเพิ่ม Listener สำหรับอินพุตทั้งหมดจะไม่ทำงานในอินพุตที่สร้างแบบไดนามิกด้านหลัง

นอกจากนี้คุณสามารถลบลูกศรอินพุตด้วย CSS

input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

<input type="number" onwheel="this.blur()" />

@Semyon Perepelitsa

มีทางออกที่ดีกว่านี้ การเบลอจะลบโฟกัสออกจากอินพุตและนั่นคือผลข้างเคียงที่คุณไม่ต้องการ คุณควรใช้ evt.preventDefault แทน ซึ่งจะป้องกันพฤติกรรมเริ่มต้นของอินพุตเมื่อผู้ใช้เลื่อน นี่คือรหัส:

input = document.getElementById("the_number_input")
input.addEventListener("mousewheel", function(evt){ evt.preventDefault(); })

ก่อนอื่นคุณต้องหยุดเหตุการณ์ mousewheel โดย:

1. ปิดการใช้งานด้วย mousewheel.disableScroll
2. สกัดกั้นด้วย e.preventDefault();
3. โดยการลบโฟกัสออกจากองค์ประกอบ el.blur();

สองแนวทางแรกทั้งสองหยุดไม่ให้หน้าต่างเลื่อนและสุดท้ายจะลบโฟกัสออกจากองค์ประกอบ ซึ่งทั้งสองอย่างนี้เป็นผลลัพธ์ที่ไม่พึงปรารถนา

วิธีแก้ปัญหาอย่างหนึ่งคือการใช้el.blur()และปรับโฟกัสองค์ประกอบใหม่หลังจากล่าช้า:

$('input[type=number]').on('mousewheel', function(){
  var el = $(this);
  el.blur();
  setTimeout(function(){
    el.focus();
  }, 10);
});

สำหรับใครก็ตามที่ทำงานกับ React และกำลังมองหาวิธีแก้ปัญหา ฉันพบว่าวิธีที่ง่ายที่สุดคือการใช้ onWheelCapture prop ในองค์ประกอบอินพุตดังนี้:

onWheelCapture={e => { e.target.blur() }}

คำตอบที่ให้ไว้ใช้ไม่ได้ใน Firefox (Quantum) ต้องเปลี่ยนผู้ฟังเหตุการณ์จากล้อเลื่อนเป็นล้อ:

$(':input[type=number]').on('wheel',function(e){ $(this).blur(); });

รหัสนี้ใช้ได้กับ Firefox Quantum และ Chrome

การเปลี่ยนแปลง typescript

typescript จำเป็นต้องรู้ว่าคุณกำลังทำงานกับ HTMLElement เพื่อความปลอดภัยในการพิมพ์มิฉะนั้นคุณจะพบProperty 'type' does not exist on type 'Element'ข้อผิดพลาดมากมาย

document.addEventListener("mousewheel", function(event){
  let numberInput = (<HTMLInputElement>document.activeElement);
  if (numberInput.type === "number") {
    numberInput.blur();
  }
});

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

e.target.parentElement.dispatchEvent(e);

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

อีกวิธีหนึ่งที่ทำงานได้ดีอย่างน้อยบน Firefox และ Chromium คือการสร้าง<input>องค์ประกอบชั่วคราวreadOnlyเช่นนี้:

function handleScroll(e) {
  if (e.target.tagName.toLowerCase() === 'input'
    && (e.target.type === 'number')
    && (e.target === document.activeElement)
    && !e.target.readOnly
  ) {
      e.target.readOnly = true;
      setTimeout(function(el){ el.readOnly = false; }, 0, e.target);
  }
}
document.addEventListener('wheel', function(e){ handleScroll(e); });

ผลข้างเคียงอย่างหนึ่งที่ฉันสังเกตเห็นคือมันอาจทำให้สนามสั่นไหวในเสี้ยววินาทีหากคุณมีสไตล์ที่แตกต่างกันสำหรับreadOnlyฟิลด์ แต่สำหรับกรณีของฉันอย่างน้อยก็ดูเหมือนจะไม่เป็นปัญหา

ในทำนองเดียวกัน (ตามที่อธิบายไว้ในคำตอบของเจมส์) แทนที่จะแก้ไขreadOnlyคุณสมบัติคุณสามารถblur()ฟิลด์แล้วfocus()ย้อนกลับ แต่อีกครั้งขึ้นอยู่กับรูปแบบที่ใช้อาจเกิดการกะพริบ

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

หากคุณต้องการโซลูชันที่ไม่ต้องใช้ JavaScript การรวมฟังก์ชัน HTML บางอย่างเข้ากับองค์ประกอบหลอก CSS จะช่วยได้

span {
  position: relative;
  display: inline-block; /* Fit around contents */
}

span::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; /* Stretch over containing block */
  cursor: text; /* restore I-beam cursor */
}

/* Restore context menu while editing */
input:focus {
  position: relative;
  z-index: 1;
}

<label>How many javascripts can u fit in u mouth?
  <span><input type="number" min="0" max="99" value="1"></span>
</label>

วิธีนี้ใช้ได้ผลเนื่องจากการคลิกที่เนื้อหาของ<label>ฟิลด์ที่เกี่ยวข้องกับฟิลด์แบบฟอร์มจะเป็นการโฟกัสฟิลด์ อย่างไรก็ตาม“ windowpane” ขององค์ประกอบหลอกที่อยู่เหนือฟิลด์จะปิดกั้นไม่ให้เหตุการณ์ mousewheel เข้าถึงได้

ข้อเสียเปรียบคือปุ่มสปินเนอร์ขึ้น / ลงไม่ทำงานอีกต่อไป แต่คุณบอกว่าคุณได้ลบออกไปแล้ว

ตามทฤษฎีแล้วเราสามารถเรียกคืนเมนูบริบทได้โดยไม่ต้องให้อินพุตถูกโฟกัสก่อน: :hoverสไตล์ไม่ควรเริ่มทำงานเมื่อผู้ใช้เลื่อนเนื่องจากเบราว์เซอร์หลีกเลี่ยงการคำนวณซ้ำระหว่างการเลื่อนด้วยเหตุผลด้านประสิทธิภาพ แต่ฉันไม่ได้ข้ามเบราว์เซอร์ / อุปกรณ์อย่างละเอียด ทดสอบแล้ว

function fixNumericScrolling() {
$$( "input[type=number]" ).addEvent( "mousewheel", function(e) {
    stopAll(e);     
} );
}

function stopAll(e) {
if( typeof( e.preventDefault               ) != "undefined" ) e.preventDefault();
if( typeof( e.stopImmediatePropagation     ) != "undefined" ) e.stopImmediatePropagation();
if( typeof( event ) != "undefined" ) {
    if( typeof( event.preventDefault           ) != "undefined" ) event.preventDefault();
    if( typeof( event.stopImmediatePropagation ) != "undefined" ) event.stopImmediatePropagation();
}

return false;
}

วิธีแก้ปัญหาที่ง่ายที่สุดคือเพิ่มonWheel={ event => event.currentTarget.blur() }}อินพุตเอง