चयन प्रकार / चयन इनपुट पर = क्रोम में = "संख्या" की अनुमति नहीं है

Question 1

हमारा एप्लिकेशन इनपुट फ़ील्ड पर चयन स्टार्ट का उपयोग करता है यह निर्धारित करने के लिए कि क्या वे उपयोगकर्ता को अगले / पिछले क्षेत्र में ले जाते हैं जब वे तीर कुंजियों को दबाते हैं (यानी, जब चयन पाठ के अंत में होता है और उपयोगकर्ता दायां तीर दबाता है जिसे हम स्थानांतरित करते हैं अगला क्षेत्र, अन्यथा)

Chrome अब सेलेक्शनस्टार्ट को जहाँ = "नंबर" टाइप करने से रोकता है। अब यह अपवाद फेंकता है:

Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection.

निम्नलिखित देखें:

https://codereview.chromium.org/100433008/#ps60001

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#do-not-apply

क्या टाइप = "संख्या" के इनपुट क्षेत्र में कैरेट के स्थान को निर्धारित करने का कोई तरीका है?

Question 2

चयन केवल पाठ / खोज, URL, टेल और पासवर्ड के साथ अनुमत है । प्रकार संख्या के इनपुट के लिए चयन को अक्षम करने का संभावित कारण यह है कि कुछ उपकरणों पर, या कुछ परिस्थितियों में (उदाहरण के लिए, जब इनपुट को एक संक्षिप्त रूप में प्रस्तुत किया गया है list), तो कोई कैरेट नहीं हो सकता है। एकमात्र समाधान मैंने पाया है कि इनपुट प्रकार को पाठ में बदलना (इनपुट को प्रतिबंधित करने के लिए उपयुक्त पैटर्न के साथ)। मैं अभी भी इनपुट प्रकार को बदले बिना करने के लिए एक रास्ता ढूंढ रहा हूं और जब मुझे कुछ मिलेगा तो मैं एक अपडेट पोस्ट करूंगा।

Question 3

मुझे इसके लिए एक साधारण वर्कअराउंड (क्रोम पर परीक्षण किया गया) मिला है setSelectionRange()। आप बस उपयोग typeकरने textसे पहले बदल सकते हैं setSelectionRange()और फिर इसे वापस बदल सकते हैं number।

यहां jquery के साथ एक सरल उदाहरण दिया गया है, जो जब भी आप इनपुट पर क्लिक करते हैं, तो इनपुट में नंबर 4 में स्थिति को ध्यान में रखेगा। व्यवहार को देखने के लिए इनपुट में 5 से अधिक संख्या जोड़ें)

डुबो देना

Question 4

वर्तमान में एकमात्र तत्व जो पाठ चयन को सुरक्षित रूप से अनुमति देते हैं:

<input type="text|search|password|tel|url">जैसा कि इसमें वर्णित है:
whatwg: SelectionStart विशेषता ।

आप इनपुट तत्वों का बारीकी से अवलोकन करने के लिए HTMLInputElement इंटरफ़ेस के लिए प्रलेखन भी पढ़ सकते हैं।

इस "मुद्दे" को सुरक्षित रूप से दूर करने के लिए, अब के लिए सबसे अच्छा एक के साथ सौदा है <input type="text">और एक मुखौटा / बाधा लागू करें जो केवल संख्याओं को स्वीकार करते हैं। आवश्यकता को पूरा करने वाले कुछ प्लगइन्स हैं:

http://digitalbush.com/projects/masked-input-plugin/
http://jherax.github.io/#jqueryfnnumericinput-
http://firstopinion.github.io/formatter.js/
और दूसरों के टन ...

आप यहां पिछले प्लग इन में से एक का लाइव डेमो देख सकते हैं:

http://plnkr.co/edit/VPVokB?p=preview

यदि आप सुरक्षित रूप से उपयोग करना चाहते हैं selectionStart, तो आप उन तत्वों की जांच कर सकते हैं जो इसका समर्थन करते हैं ( इनपुट प्रकार विशेषताएँ देखें )

कार्यान्वयन

// Fix: failed to read the 'selectionStart' property from 'HTMLInputElement'
// The @fn parameter provides a callback to execute additional code
var _fixSelection = (function() {
    var _SELECTABLE_TYPES = /text|password|search|tel|url/;
    return function fixSelection (dom, fn) {
        var validType = _SELECTABLE_TYPES.test(dom.type),
            selection = {
                start: validType ? dom.selectionStart : 0,
                end: validType ? dom.selectionEnd : 0
            };
        if (validType && fn instanceof Function) fn(dom);
        return selection;
    };
}());

// Gets the current position of the cursor in the @dom element
function getCaretPosition (dom) {
    var selection, sel;
    if ('selectionStart' in dom) {
        return _fixSelection(dom).start;
    } else { // IE below version 9
        selection = document.selection;
        if (selection) {
            sel = selection.createRange();
            sel.moveStart('character', -dom.value.length);
            return sel.text.length;
        }
    }
    return -1;
}

प्रयोग

// If the DOM element does not support `selectionStart`,
// the returned object sets its properties to -1.
var box = document.getElementById("price"),
    pos = getCaretPosition(box);
console.log("position: ", pos);

उपरोक्त उदाहरण यहां पाया जा सकता है: jsu.fnGetCaretPosition ()

Question 5

JQuery न्यूमेरिक प्लगइन, संस्करण 1.3.x का उपयोग करते समय यह हमारे लिए हो रहा था, इसलिए लपेटकर selectionStartऔर हम selectionEndएक try...catch{}त्रुटि को दबाने में सक्षम थे।

स्रोत: https://github.com/joaquingatica/jQuery-Plugins/commit/a53f82044759d29ff30bac698b09e3202b456545

Question 6

एक काम के आसपास के रूप में, type="tel"इनपुट प्रकार type="number"क्रोम में बहुत समान कार्यक्षमता प्रदान करता है और इसमें यह सीमा नहीं है (जैसा कि पैट्रिस द्वारा बताया गया है)।

Question 7

Chrome पर इसे पूरा करने का एक तरीका है (और शायद कुछ अन्य ब्राउज़र, लेकिन Chrome यहां बड़ा अपराधी है)। window.getSelection()वर्तमान इनपुट से चयन ऑब्जेक्ट को पुनः प्राप्त करने के लिए उपयोग करें और फिर चयन को पीछे की ओर (या आगे की ओर) बढ़ाएं और देखें कि क्या toString()चयन का मान बदलता है। यदि ऐसा नहीं होता है, तो कर्सर इनपुट के अंत में है और आप अपने अगले इनपुट पर जा सकते हैं। यदि ऐसा होता है, तो आपको चयन को पूर्ववत करने के लिए ऑपरेशन को उल्टा करना होगा।

s = window.getSelection();
len = s.toString().length;
s.modify('extend', 'backward', 'character');
if (len < s.toString().length) {
    // It's not at the beginning of the input, restore previous selection
    s.modify('extend', 'forward', 'character');
} else {
    // It's at the end, you can move to the previous input
}

मुझे यह विचार इस SO उत्तर से मिला: https://stackoverflow.com/a/24247942

Question 8

क्या हम इस तरह से समर्थित तत्वों को शामिल करने के लिए केवल तत्व जांच को उल्टा नहीं कर सकते, जैसे:

if (deviceIsIOS &&
    targetElement.setSelectionRange &&
    (
        targetElement.type === 'text' ||
        targetElement.type === 'search' ||
        targetElement.type === 'password' ||
        targetElement.type === 'url' ||
        targetElement.type === 'tel'
    )
) {

इसके अलावा:

if (deviceIsIOS && 
    targetElement.setSelectionRange && 
    targetElement.type.indexOf('date') !== 0 && 
    targetElement.type !== 'time' && 
    targetElement.type !== 'month'
) {

Question 9

हालांकि इस प्रकार के प्रपत्र फ़ील्ड के लिए हटाए गए ईवेंट के साथ समस्या अभी भी प्रासंगिक हो सकती है, जहां तक मैं देख सकता हूं, इस तरह के फ़ील्ड को "परिवर्तन" इवेंट के साथ हमेशा की तरह सुना जा सकता है।

इस प्रकार के क्षेत्र के लिए घटनाओं के मुद्दे का जवाब ढूंढते हुए मुझे यह लेख यहां मिला, लेकिन इसका परीक्षण करते समय, मैंने पाया कि मैं केवल उल्लेखित "परिवर्तन" घटना पर भरोसा कर सकता हूं।

Question 10

मुझे यह त्रुटि कोणीयज वेबसाइट में प्राप्त हुई।

मैंने एक इनपुट पर एक कस्टम डेटा विशेषता बनाई थी और एनजी-ब्लर ($ घटना के साथ) का भी उपयोग कर रहा था।

जब मेरे कॉलबैक को कॉल किया गया तो मैं 'डेटा-आईडी' मान को एक्सेस करने की कोशिश कर रहा था:

var id = $event.target.attributes["data-id"]

और यह इस तरह होना चाहिए था:

var id = $event.target.attributes["data-id"].value

इस त्रुटि के बारे में कहीं भी बहुत अधिक प्रतीत नहीं होता है इसलिए मैं इसे यहां छोड़ रहा हूं।

Question 11

मुझे पता है कि यह उत्तर बहुत देर से आता है, लेकिन यहाँ एक प्लग-इन है जो सभी प्रकार के तत्वों के लिए चयन को आरंभ करता है, अधिकांश ब्राउज़रों (पुराने और नए) के लिए:

https://github.com/adelriosantiago/caret

मैंने इसे type="number"@ncohen के उत्तर का उपयोग करके समस्या से निपटने के लिए अद्यतन किया है ।

Question 12

Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection.निम्नानुसार हल करें :

var checkFocus = false;
var originalValue = "";
$(document).ready(function() {
  $("input").focus(function() {
    var that = this;
    if ($('#' + $(this).context.id).attr("type") == "text") {
      setTimeout(function() {
        if (that.selectionStart != null || that.selectionEnd != null) {
          that.selectionStart = that.selectionEnd = 10000;
        }
      }, 0);
    } else if ($('#' + $(this).context.id).attr("type") == "number") {
      if (checkFocus) {
        moveCursorToEnd($('#' + $(this).context.id), $(this).context.id);
        checkValue($('#' + $(this).context.id))
        checkFocus = false;
      } else {
        $('#' + $(this).context.id).blur();
      }
    }
  });
});

function FocusTextBox(id) {
  checkFocus = true;
  document.getElementById(id).focus();
}

function checkValue(input) {
  if ($(input).val() == originalValue || $(input).val() == "") {
    $(input).val(originalValue)
  }
}

function moveCursorToEnd(input, id) {
  originalValue = input.val();
  input.val('');
  document.getElementById(id).focus();
  return originalValue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<button onclick="FocusTextBox('textid')">
   <input id="textid" type="number" value="1234" > 
</button>

स्निपेट का विस्तार करें

Question 13

यदि क्रोम उपकरण परीक्षण मोड का उपयोग कर रहे हैं तो इस पर कोणीय में झूठे सकारात्मक के लिए देखें।

तो यह स्पष्ट रूप से क्रोम है और वास्तविक iPhone नहीं है - फिर भी त्रुटि अभी भी उठती है क्योंकि _platform.IOSरिटर्न सही है और फिर setSelectionRangeबाद में विफल हो जाता है।

यह कोणीय है - लेकिन अन्य फ्रेमवर्क / वातावरण में समान मुद्दे मौजूद हो सकते हैं।