input type =“ number”のselectionStart / selectionEndは、Chromeでは許可されなくなりました

このアプリケーションは、入力フィールドでselectionStartを使用して、ユーザーが矢印キーを押したときに（つまり、選択がテキストの最後にあり、ユーザーが移動先の右矢印を押したときに、ユーザーを次/前のフィールドに自動的に移動するかどうかを決定します。次のフィールド、それ以外の場合）

Chromeでは、type = "number"の場所でselectionStartが使用されないようになりました。例外がスローされるようになりました。

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

type = "number"の入力フィールドでキャレットの場所を特定する方法はありますか？

選択は、テキスト/検索、URL、tel、およびパスワードでのみ許可されます。タイプ番号の入力に対して選択が無効になっている理由として考えられるのは、一部のデバイス、または特定の状況（入力がショートとして表示されている場合などlist）では、キャレットがない可能性があるためです。私が見つけた唯一の解決策は、入力タイプをテキストに変更することでした（入力を制限するための適切なパターンを使用）。入力タイプを変更せずに処理する方法をまだ探しています。何かが見つかったら更新を投稿します。

の簡単な回避策（Chromeでテスト済み）を見つけましたsetSelectionRange()。あなたは、単に変更することができますtypeにtextは、使用する前にsetSelectionRange()、その後にそれをバックに変更しますnumber。

これは、入力をクリックするたびに入力された数値の4番目の位置にキャレットを配置するjqueryの簡単な例です（動作を確認するには、入力に5つ以上の数値を追加してください）。

プランカー

現在、テキストを安全に選択できる要素は次のとおりです。

<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/
• と他のトン...

以前のプラグインの1つのライブデモをここで見ることができます：

• 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（）

これは、jQuery Numeric Pluginバージョン1.3.xの使用中に発生していたため、selectionStartとselectionEndをaでラップするとtry...catch{}、エラーを抑制することができました。

ソース：https：//github.com/joaquingatica/jQuery-Plugins/commit/a53f82044759d29ff30bac698b09e3202b456545

回避策として、type="tel"入力タイプはtype="number"Chromeと非常によく似た機能を提供し、この制限はありません（Patriceが指摘しているように）。

Chromeでこれを実現する方法が1つあります（他のブラウザもありますが、ここでは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

次のように、要素チェックを逆にして、サポートされている要素だけを含めることはできません。

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

このタイプのフォームフィールドの非推奨イベントの問題は依然として関連している可能性がありますが、私が見る限り、この種のフィールドは通常どおり「変更」イベントでリッスンできます。

このタイプのフィールドのイベントの問題に対する回答を探しているときにこの記事にたどり着きましたが、テストしていると、前述の「変更」イベントに頼ることができることがわかりました。

このエラーはangularjsのWebサイトで受け取りました。

入力にカスタムデータ属性を作成し、ng-blur（$ eventを使用）も使用していました。

コールバックが呼び出されたとき、次のように「data-id」値にアクセスしようとしていました。

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

そしてそれはこのようになっているはずです：

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

このエラーについてはどこにもあまりないようですので、ここに残しておきます。

私はこの答えが遅すぎることを知っていますが、これはほとんどのブラウザ（新旧）のすべてのタイプの要素に対してselectionStartを実装するプラグインです：

https://github.com/adelriosantiago/caret

type="number"@ncohenの回答を使用して、問題に対処するために更新しました。

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>

Chromeのデバイステストモードを使用している場合は、Angularでこれに関する誤検知に注意してください。

したがって、これは明らかにChromeであり、実際のiPhoneではありません-それでも、_platform.IOStrueを返し、その後エラーが発生するため、エラーが発生しますsetSelectionRangeその後失敗するます。

これはAngularですが、他のフレームワーク/環境にも同様の問題が存在する可能性があります。