javascript - WhatWG/W3C/Chrome संस्करण 33.0.1750.146 "इनग्रेगेशन बग" को कैसे हटाएं? इनपुट प्रकार="संख्या"/> फ़ील्ड के साथ




google-chrome html-input (2)

उपयोग के मामले पर निर्भर करता है, वहाँ एक अधिक उपयुक्त (यद्यपि विस्तृत) वैकल्पिक हल हो सकता है। उदाहरण के लिए, कर्सर की वर्तमान स्थिति पर पाठ जोड़ने के लिए, आप निम्न (क्रोम में परीक्षण) कर सकते हैं:

var len, pre, post,

    // Currently focused element
    a = document.activeElement,

    // Get current selection
    s = window.getSelection();

// Delete any existing contents
s.deleteFromDocument();

// Keep moving selection backward until the length stops increasing
do {
    len = String(s).length;
    s.modify('extend', 'backward', 'line');
}
while (String(s).length !== len);

// Store the selection, then delete it
pre = String(s);
s.deleteFromDocument();

// Keep moving selection forward until the length stops increasing
do {
    len = String(s).length;
    s.modify('extend', 'forward', 'line');
}
while (String(s).length !== len);

// Store the selection, then delete it
post = String(s);
s.deleteFromDocument();

// Recreate the contents with the new text added
a.setAttribute('value', a.defaultValue);
a.value = pre + txt + post;

// Move the selection to after the new text
a.select();
s = window.getSelection();
s.collapseToEnd();

while (len-- > 0)
    s.modify('move', 'backward', 'character');

इस दृष्टिकोण की सीमाएं भी हो सकती हैं जिन्हें अधिक विस्तृत समाधान भी हो सकते हैं, जैसे पाठ की तुलना में एक अलग मान लौटाया जाता है (उदाहरण के लिए एक type="email" इनपुट में अरबी डोमेन नाम का मामला हो सकता है) ।

दुर्भाग्य से, एक बग है जो इस समाधान को Firefox / Gecko में काम करने से रोकता है, लेकिन कम से कम फ़ायरफ़ॉक्स अभी भी <input type="email"> पर चयन एपीआई की अनुमति देता है।

मैंने उद्धरणों में शब्द "प्रतिगमन बग" डाल दिया है क्योंकि जाहिर है इस पर कुछ मिश्रित राय है। पूर्ण विवरण के लिए बग 24796 बगजिला में देखें

लघु Google Chrome में, WhatWG चश्मा के नवीनतम संस्करण के अनुसार परिवर्तन कार्यान्वित किया गया: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type- attr-summary जो निम्नलिखित गुणों और विधियों को <input type="number"/> फ़ील्ड से निकाल दिया है

गुण:

  • selectionstart
  • selectionEnd

तरीके:

  • चुनते हैं()
  • सेट सेलेक्शनरेन्ज (प्रारंभ, समाप्ति)

(वहाँ अन्य हैं लेकिन ये आम कुंजी वाले हैं)

विधियों को परिभाषित किया जाता है यदि आप HTMLInputElement "संख्यात्मक" उदाहरण का निरीक्षण करते हैं, लेकिन तरीकों को कॉल करने का प्रयास करते हैं या गुणों का अनुरोध करने के लिए एक अपवाद फेंकता है :-(

आईएमएचओ यह एक बग है (चूंकि कार्यक्षमता कुछ भी नहीं मिली है के साथ हटा दी गई है ... और वेबसास्टर्स / अनुप्रयोगों की 1,000 वेबसाइटें हैं जो जावास्क्रिप्ट के माध्यम से इन संख्यात्मक इनपुट क्षेत्रों के लिए विस्तारित व्यवहार प्रदान करती हैं ... लेकिन मैं उन लोगों के लिए इसे लड़ने के लिए कृपया ऊपर सूचीबद्ध बग पोस्ट का उपयोग करें))

टी एल; डॉ

प्रयोज्य प्रयोजनों के लिए मैं निश्चित रूप से <input type="number"/> फ़ील्ड का उपयोग जारी रखने की योजना बना रहा हूं और वे प्रयोक्ता एजेंट को एक "संकेत" प्रदान करते हैं कि यदि मुझे एक मोबाइल डिवाइस (स्मार्टफोन / टैबलेट /?) क्षेत्रीय कुंजीपटल को प्रस्तुत करने के लिए जब फ़ील्ड बनाम बनाम डिफ़ॉल्ट अल्फा कीबोर्ड है।

हालांकि क्रोम के वर्तमान संस्करण (देखें 33.0.1750.146) और किसी भी अन्य ब्राउज़र को जो इस स्पेक्टिव परिवर्तन का अंधाधुंध रूप से पालन करता है, मैं प्रतिपादित फ़ील्ड को सुरक्षित रूप से <input type="text"/> वापस कनवर्ट करना चाहता हूं

टिप्पणियाँ:

  • मक्खी पर इन क्षेत्रों को बदलने की कोशिश करते समय उनकी सामग्री को संशोधित करना असफल साबित होता है क्योंकि फील्ड विशेषता का बदला जाता है जब फ़ील्ड इसे चयन सीमा खो देता है
  • मेरे पास एक वैकल्पिक हल है जिस पर मैं शीघ्र ही पोस्ट करूंगा, लेकिन मैं यह सुनिश्चित करना चाहता हूं कि इस समस्या / मुकाबले सभी डेवलपर्स के लिए यह प्रश्न यहां था

मैंने इसे निम्न कोड के साथ हल किया है:

function checkForInputTypeNumberBug(){
  var dummy = document.createElement('input');
  try {
    dummy.type = 'number';
  } catch(ex){
    //Older IE versions will fail to set the type
  }
  if(typeof(dummy.setSelectionRange) != 'undefined' && typeof(dummy.createTextRange) == 'undefined'){
    //Chrome, Firefox, Safari, Opera only!
    try {
      var sel = dummy.setSelectionRange(0,0);
    } catch(ex){
      //This exception is currently thrown in Chrome v33.0.1750.146 as they have removed support
      //for this method on number fields. Thus we need to revert all number fields to text fields.
      $('input[type=number]').each(function(){
        this.type = 'text';
      });
    }
  }
}
$(document).ready(function(){
  checkForInputTypeNumberBug();
});

मैंने इसे एक स्टैंडअलोन फ़ंक्शन बना दिया है क्योंकि मेरे पास ऐसे मामलों हैं जहां फ़ील्ड AJAX के माध्यम से लोड किए जाते हैं और मुझे फ्लाई पर फ़ंक्शन को कॉल करने में सक्षम होना चाहिए।

यह कोड पुराने IE संस्करणों को संभालता है जहां प्रकार सेट करने का प्रयास विफल हो जाएगा और साथ ही क्रोम में अपवाद को संभालना विफल होगा (ताकि डमी तत्व पर) पृष्ठों को इस व्यवहार में परिवर्तन को दूर किया जा सके।

अद्यतन करें: इनपुटमीटर एट्रिब्यूट (वर्तमान में असमर्थित) का उपयोग करने के दौरान @ एंडी ई के सुझाव के अनुसार, प्रयोक्ता एजेंटों को चयन एपीआई निकालने से पहले इनपुट मिड के कार्यान्वयन की कोशिश करने और प्राथमिकता देने के लिए मैंने एक बग बनाया है: https://www.w3.org/Bugs /Public/show_bug.cgi?id=26695







soft-keyboard