`<ইনপুট টাইপ = সংখ্যা>` এ স্ক্রোলিং অক্ষম করুন `

Question

কোনও ইনপুট নম্বর ক্ষেত্রে নম্বর পরিবর্তন করে স্ক্রোল হুইলটি অক্ষম করা কি সম্ভব? আমি স্পিনারটিকে অপসারণ করার জন্য ওয়েবকিট-নির্দিষ্ট সিএসএসের সাথে গোলমাল করেছি তবে আমি এই আচরণটি পুরোপুরি পরিত্রাণ পেতে চাই। আমি type=numberএটি ব্যবহার করতে পছন্দ করি কারণ এটি আইওএসে একটি দুর্দান্ত কীবোর্ড নিয়ে আসে।

Comments

টাইপ = সংখ্যা ব্যবহার না করে ইনপুট টাইপ টেল (টাইপ = "টেল") ব্যবহার করুন। এটি একটি আইওএস নাম্বার কীবোর্ড পপআপ করবে।

— প্রবীণ বিজয়ন

আপনি onscrollকেবল এতে কোনও হ্যান্ডলার যুক্ত করলে কী ঘটে event.preventDefault()?

— রবার্টক

আমার বিনীত মতে, আমি এমনকি এটি একটি বৈশিষ্ট্য হওয়া উচিত বলে মনে করি না। ব্রাউজার বিকাশে আমার যদি কোনও বক্তব্য থাকে তবে আমি সম্ভবত এই বৈশিষ্ট্যটি সরিয়ে ফেলার জন্য চাপ দেব। এটি বিরক্তিকর ছাড়া আর কিছুই নয় এবং আমি আসলে কাউকে জানি না যারা এটি ব্যবহার করবে।

— কির্কল্যান্ড

আমি আপনার সাথে কির্কল্যান্ড সম্পূর্ণরূপে একমত। কোনও ফর্মের সাহায্যে কোনও পৃষ্ঠা স্ক্রোল করা খুব খারাপ ইউএক্স এবং যখন কোনও সংখ্যার ইনপুট উপাদানটি আপনার মাউসের নীচে যায়, তখন এটি বাড়ানো শুরু করে এবং পৃষ্ঠাটি স্ক্রোলিং বন্ধ করে দেয়। সম্পূর্ণরূপে বিশৃঙ্খল।

— kjs3

@ প্রবীণবিজয়ান: খুব কম, এটি নতুনভাবে কাজ করা, নতুন এইচটিএমএল 5 ইনপুট ধরণের ব্যবহারের কোনও কারণেই নয়। ভবিষ্যতে এটি হতে পারে যে ফোনগুলি আপনাকে পরিচিতি বা যে কোনও কিছু থেকে নম্বর বাছাই করার সম্ভাবনা দেয় যা আপনি একে অন্যরকম নম্বর বলে বোঝাতে চাইলে এটি খুব অদ্ভুত লাগবে।

— বিস্মিত

Answer 1

অন্যদের পরামর্শ মতো ইনপুট-সংখ্যা উপাদানগুলিতে মাউসওয়েল ইভেন্টের ডিফল্ট আচরণকে আটকাতে হবে ("ব্লার ()" কল করা সাধারণত এটি করার পক্ষে পছন্দসই উপায় হবে না, কারণ এটি তা নয়, ব্যবহারকারী কী চান)।

কিন্তু। আমি সমস্ত সময় ইনপুট-সংখ্যা উপাদানগুলিতে মাউসওহিল ইভেন্টটি শুনতে এড়াতে এবং কেবল তখনই করতাম, যখন উপাদানটি ফোকাসে থাকে (সমস্যাটি তখনই থাকে)। অন্যথায় যখন মাউস পয়েন্টারটি কোনও ইনপুট-সংখ্যা উপাদানের উপরে থাকে তখন ব্যবহারকারী পৃষ্ঠাটি স্ক্রোল করতে পারবেন না ।

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')
})

(পার্শ্ববর্তী ফর্ম উপাদানগুলিতে ফোকাস ইভেন্টগুলি ডেলিগেট করুন - অনেক ইভেন্ট শ্রোতাদের এড়ানোর জন্য, যা কার্য সম্পাদনের জন্য খারাপ))

Comments

দুর্দান্ত উত্তর। আমি মনে করি আমি যদি আজ এটি করতাম তবে আমি স্পর্শহীন ডিভাইসে ইভেন্ট শ্রোতাকে শর্তাধীন প্রয়োগ করার জন্য মডার্নআইজার.টচ ব্যবহার করব। মূলত ব্যবহারকারী 2863715 নীচে যা বলেছে।

— kjs3

দুর্দান্ত উত্তর, তবে কমপক্ষে ওয়েবকিটে, কার্সরটি ইনপুট উপাদানটির ওপরে থাকা অবস্থায় এটি উইন্ডোটিকে স্ক্রোলিং থেকে বাধা দেয়। আমি ভেবেছিলাম মাউস হুইল ইভেন্টগুলিও বুদবুদ হওয়ার কথা।

— রায়ান ম্যাকগেরি

যখন কোনও উপাদান যখন ফোকাসে থাকে তখন কেবলমাত্র অক্ষম স্ক্রোল ফাংশন প্রয়োগ করার সময়, যখন মাউসটি ইনপুট উপাদানটির উপরে থাকে তখন এটি স্ক্রোলিং প্রতিরোধ করা উচিত নয়। যখন উপাদানটি ফোকাসে থাকে তখন এটি উইন্ডো স্ক্রোল করা থেকে বাধা দেয়। এবং হ্যাঁ, মাউস-হুইল ইভেন্টগুলি কেন বুদবুদ নয় ...: /

— গ্রান্টজউ

এটি এমন আচরণের জন্য একটি দুর্দান্ত ফিক্স যা প্রথম স্থানে থাকা উচিত নয়।

— জনি

এটি বেশিরভাগ ইউনিক্স টাইপ প্ল্যাটফর্ম জিনোম, অক্স, অ্যান্ড্রয়েড (মাউস সহ) এ কাজ করে না কারণ স্ক্রোল আচরণের জন্য ইনপুটকে ফোকাস করার প্রয়োজন হয় না। বিকল্পভাবে, আমি কেবল ইনপুটগুলির পাঠ্য প্রকারটি ব্যবহার করেছি এবং এতে আমার নাম্বার সীমাবদ্ধতা রেখেছি (কী শর্টকাট

— হারাতে

Answer 2

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

Comments

এই এক যে নিখুঁত।

— প্যাট্রিক লাসজলো

এটা ভাল কাজ। ধন্যবাদ.

— বিজয় এস এস

Answer 3

একটি ইভেন্ট শ্রোতা তাদের সব শাসন করতে

এই অনুরূপ @Simon Perepelitsa এর উত্তর বিশুদ্ধ 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"/>

যদি কোনও ইনপুটটির নসক্রোল ক্লাস থাকে তবে এটি স্ক্রোলটিতে বদলাবে না, অন্যথায় সবকিছু একই থাকে।

জেএসফিডেলের সাথে এখানে পরীক্ষা করুন

Comments

আমি দেখতে পাচ্ছি যে এটি ডাউনওয়েট করা হয়েছে। যদি আপনি কোনও সমস্যা দেখতে পান তবে ডাউনটাওয়েট সহ একটি মন্তব্য করুন। আমি যদি কিছু মিস করি তবে আমি এটি কী তা শিখতে চাই। ধন্যবাদ।

— পিটার রাকমান্যি

আধুনিক ব্রাউজারের জন্য, দয়া করে wheelপরিবর্তে ইভেন্টটি ব্যবহার করুন mousewheel। রেফারেন্স: বিকাশকারী.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েবে / এপিআই / এলিমেট / হুইল_সেন্ট পিএস। আমি ভোট দেই না।

— ভি

Answer 4

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

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

JQuery উদাহরণ এবং একটি ক্রস-ব্রাউজার সমাধান সম্পর্কিত প্রশ্ন দেখুন:

সংখ্যার ইনপুট স্ক্রোলের জন্য এইচটিএমএল 5 ইভেন্ট শ্রোতা - কেবল ক্রোম

Comments

ধন্যবাদ সেমুন, আমি এইভাবে jQuery সহ সমস্ত সংখ্যার ইনপুটটির জন্য এটি পরিচালনা করেছিলাম: $(':input[type=number]' ).live('mousewheel',function(e){ $(this).blur(); });আমি ডিফল্ট প্রতিরোধের পরিবর্তে অস্পষ্ট ব্যবহার করেছিলাম যাতে এটি পৃষ্ঠাটিকে স্ক্রোলিং থেকে আটকে না!

— থাইবাট কলসন

অস্পষ্টতা সম্পর্কে দুর্দান্ত সংযোজন, আমি জানতাম না আপনি এখনও পৃষ্ঠা স্ক্রোলিংয়ের অনুমতি দিতে পারবেন। আমি আমার উত্তর আপডেট করেছি।

— সাইমন পেরেলপিলিটসা

এফওয়াইআই, হ্রাস করা live()হয়। এখন, আপনার ব্যবহার করা উচিত on(): $(':input[type=number]').on('mousewheel',function(e){ $(this).blur(); });

— সাইদ জেবার্ডাস্ট

@ সায়েদজেদারদাস্ত আপনার মন্তব্যটি উত্তর হিসাবে প্রাপ্য

— স্নোপ্পি

আধুনিক ব্রাউজারের জন্য, দয়া করে wheelপরিবর্তে ইভেন্টটি ব্যবহার করুন mousewheel। তথ্যসূত্র: ডেভেলপার.মোজিলা.আর.ইন-

— ইউএস

Answer 5

আপনি কেবল HTML অনভিট বৈশিষ্ট্যটি ব্যবহার করতে পারেন ।

এই বিকল্পটির পৃষ্ঠার অন্যান্য উপাদানগুলির উপরে স্ক্রোল করার কোনও প্রভাব নেই।

এবং সমস্ত ইনপুটগুলির জন্য শ্রোতা যুক্ত করুন উত্তরোত্তরভাবে তৈরি করা ইনপুটগুলিতে কাজ করে না।

অ্যাডিশনালি, আপনি সিএসএস সহ ইনপুট তীরগুলি সরাতে পারেন।

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()" />

Comments

ধন্যবাদ ভাই!! এটি কৌণিক - উপাদান 6

— নাসিরউদ্দিন সাইয়েদ

সূত্র: css-tricks.com/snippets/css/turn-off-number-input-spinners

— হাফিজ

আমরা অনেক উত্স এই CSS খুঁজে পেতে পারেন। যাইহোক, সিএসএস কেবল একটি বোনাস। প্রশ্নের আসল সমাধান হ'ল এইচটিএমএল অনভিয়েল বৈশিষ্ট্য। ;-)

— মাইকন ম্যাথিউস

আমি এই সমাধান পছন্দ! ধন্যবাদ। আমার ক্ষেত্রে, এটি onBlur()প্রত্যাশার মতো ছিল না। return falseসত্যই "চক্রের উপর কিছুই না করার" পরিবর্তে আমি একটি সহজ সেটআপ করি । <input type="number" onwheel="return false;">

— ড্যানিয়েল

Answer 6

পুনঃটুইট

এর আরও ভাল সমাধান রয়েছে is অস্পষ্টতা ইনপুট থেকে ফোকাসটি সরিয়ে দেয় এবং এটি এমন একটি দিক যা আপনি চান না affect পরিবর্তে আপনার evt.preventDefault ব্যবহার করা উচিত। এটি ব্যবহারকারী যখন স্ক্রোল করে তখন ইনপুটটির ডিফল্ট আচরণকে বাধা দেয়। কোডটি এখানে:

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

Comments

এটি কাজ করে, তবে ইভেন্টটি বুদবুদ হবে না, সুতরাং পৃষ্ঠাটি স্ক্রোল করবে না। অস্পষ্টতা ছাড়াই ডিফল্ট আচরণ (পৃষ্ঠা স্ক্রোল) রাখার কোনও উপায় আছে?

— গুগিজ

আধুনিক ব্রাউজারের জন্য, দয়া করে wheelপরিবর্তে ইভেন্টটি ব্যবহার করুন mousewheel। তথ্যসূত্র: ডেভেলপার.মোজিলা.আর.ইন-

— ইউএস

Answer 7

প্রথমে আপনাকে অবশ্যই মাউস-হুইল ইভেন্টটি বন্ধ করতে হবে:

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);
});

Comments

দেখতে খুব ভাল সমাধান, তবে পরীক্ষায় আমি দেখতে পেলাম যে এই দ্রবণটির চুরি ফোকাসের পার্শ্ব প্রতিক্রিয়া ছিল। আমি এটি করার জন্য এটি টুইট করেছিলাম: উপাদানটির ফোকাস ছিল কিনা তা দেখার জন্য একটি পরীক্ষা: var hadFocus = el.is(':focus');অস্পষ্ট হওয়ার আগে, এবং তারপরে কোনও প্রহরী কেবলমাত্র টাইমআউট নির্ধারণ করত যদি ফাফস সত্য ছিল।

— রব ডসন

Answer 8

প্রদত্ত উত্তরগুলি ফায়ারফক্সে (কোয়ান্টাম) কাজ করে না। ইভেন্ট শ্রোতাদের মাউসওয়েল থেকে চাকাতে পরিবর্তন করা দরকার:

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

এই কোডটি ফায়ারফক্স কোয়ান্টাম এবং ক্রোমে কাজ করে।

Answer 9

যে কেউ প্রতিক্রিয়া নিয়ে কাজ করছেন এবং সমাধানের সন্ধান করছেন। আমি খুঁজে পেয়েছি যে সহজতম উপায় হ'ল এইভাবে ইনপুট উপাদানগুলিতে ওয়েলক্যাপচার প্রপ ব্যবহার করা:

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

Answer 10

টাইপস্ক্রিপ্ট ভেরিয়েশন

প্রকারের স্ক্রিপ্টটি জানতে হবে যে আপনি সুরক্ষা প্রকারের জন্য এইচটিএমলেমেন্টের সাথে কাজ করছেন, অন্যথায় আপনি প্রচুর Property 'type' does not exist on type 'Element'ধরণের ত্রুটি দেখতে পাবেন ।

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

Answer 11

নিজের জন্য এটি সমাধান করার চেষ্টা করার সময়, আমি লক্ষ্য করেছি যে পৃষ্ঠার স্ক্রোলিংটি ধরে রাখা এবং ইনপুটটির ফোকাসটি রাখা সম্ভব ছিল, যেখানে ধরা পড়েছে তার মূল উপাদানটির উপর ধরা পড়া ইভেন্টটিকে পুনরায় গুলি চালানোর চেষ্টা করে সংখ্যা পরিবর্তনগুলি অক্ষম <input type="number"/>করে , কেবল এই মত:

e.target.parentElement.dispatchEvent(e);

তবে এটি ব্রাউজার কনসোলে ত্রুটি সৃষ্টি করে এবং সম্ভবত সর্বত্র কাজ করার গ্যারান্টিযুক্ত নয় (আমি কেবল ফায়ারফক্সে পরীক্ষা করেছি), কারণ এটি ইচ্ছাকৃতভাবে অবৈধ কোড।

ফায়ারফক্স এবং ক্রোমিয়ামে অন্তত অস্থায়ীভাবে <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সংখ্যা ইনপুটগুলিতে ইভেন্টগুলি পরিচালনা করছেন যা ফোকাসে রয়েছে এবং মাউস কার্সারের অধীনে রয়েছে (এটি উপরের তিনটি শর্তই বোঝায়) ব্যবহারকারীর অভিজ্ঞতার উপর নেতিবাচক প্রভাব কোনওটিরই কাছাকাছি থাকবে না।

Answer 12

আপনি যদি এমন কোনও সমাধান চান যা জাভাস্ক্রিপ্টের প্রয়োজন হয় না, তবে কিছু সিএসএস সিউডো-এলিমেন্টের সাথে এইচটিএমএল কার্যকারিতা একত্রিত করা কৌশলটি করতে পারে:

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>একটি ফর্ম ক্ষেত্রের সাথে সম্পর্কিত এমন একটি বিষয়বস্তুতে ক্লিক করা ক্ষেত্রকে ফোকাস করবে। যাইহোক, ক্ষেত্রের উপরের সিউডো-এলিমেন্টের "উইন্ডোপেন" মাউসওহিল ইভেন্টগুলিতে পৌঁছনাকে অবরুদ্ধ করবে।

অসুবিধাটি হ'ল আপ / ডাউন স্পিনার বোতামগুলি আর কাজ করে না, তবে আপনি বলেছিলেন যে আপনি যেভাবেই সেগুলি সরিয়ে ফেলেছেন।

---

তত্ত্ব, এক প্রথম নিবদ্ধ করা ইনপুট ছাড়াই প্রসঙ্গ মেনু পুনরুদ্ধার করতে পারে: :hoverশৈলী করা উচিত নয় আগুন যখন ব্যবহারকারী স্ক্রল, ব্রাউজার থেকে তাদের কর্মক্ষমতা কারণে স্ক্রলিং সময় পুনঃগণনা এড়িয়ে চলুন, কিন্তু আমি পুঙ্খানুপুঙ্খভাবে ক্রস ব্রাউজার / ডিভাইস নেই এটি পরীক্ষা।

Answer 13

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;
}

Answer 14

সহজ সমাধান হ'ল onWheel={ event => event.currentTarget.blur() }}ইনপুট নিজেই যুক্ত করা।