iOS 장치 (모바일 Safari)의 입력 필드에서 프로그래밍 방식으로 텍스트 선택

iOS 장치 (모바일 Safari)의 입력 필드에서 프로그래밍 방식으로 텍스트 선택

---

iOS 장치 (예 : iPhone, 모바일 Safari를 실행하는 iPad)에서 입력 필드의 텍스트를 프로그래밍 방식으로 어떻게 선택합니까?

일반적으로 요소 에서 .select()함수 를 호출하는 것으로 충분 <input ... />하지만 이러한 장치에서는 작동하지 않습니다. 커서는 선택하지 않고 기존 항목의 끝에 남게됩니다.

---

input.setSelectionRange(0, 9999);

https://developer.mozilla.org/en/DOM/Input.select

---

이 스레드의 어떤 것도 나를 위해 일하지 않았습니다. 다음은 내 iPad에서 작동하는 것입니다.

// t is the input field
setTimeout(function() {
    t.setSelectionRange(0, 9999);
}, 1);

---

부정적인 것을 증명하기는 어렵지만 제 연구에 따르면 이것이 모바일 사파리의 버그라고합니다.

focus ()는 어느 정도 작동합니다. 성공하려면 두 번 이상의 탭이 필요할 수 있지만 탭 자체가 필드를 제공하므로 해당 필드에서 사용자 탭에 응답하려는 경우에는 필요하지 않습니다. 초점. 불행히도 select () 는 단순히 Mobile Safari에서 작동하지 않습니다.

가장 좋은 방법은 Apple 의 버그 보고서 일 수 있습니다 .

---

이 바이올린을보십시오 : (입력 상자에 텍스트를 입력하고 '텍스트 선택'을 클릭하십시오)

내 iPod (5 세대 iOS6.0.1)의 입력 상자에서 텍스트를 선택하고 키보드를 열고 잘라 내기 / 복사 / 제안 ... 메뉴도 표시합니다.

일반 자바 스크립트 사용. jQuery로 이것을 시도하지 않았습니다.

document.getElementById("p1").selectionStart = 0
document.getElementById("p1").selectionEnd = 999

숫자 999는 샘플 일뿐입니다. 이 숫자를 선택하려는 문자 수로 설정해야합니다.

최신 정보:

• iPod5-iOS6.0.1-정상적으로 작동합니다.
• iPad1-iOS5.1.1-텍스트 만 선택되었습니다. 선택 항목을 한 번 탭하여 잘라 내기 / 복사 메뉴를 엽니 다.
• iPad2-iOS4.3.3-텍스트 만 선택되었습니다. 선택 항목을 한 번 탭하여 잘라 내기 / 복사 메뉴를 엽니 다.

마지막 2 개의 경우 input요소 에서 클릭 이벤트를 트리거하여 실험 할 수 있습니다.

업데이트 : (2013 년 7 월 10 일)

• iPod5-iOS7.0.2-링크에서 바이올린 사용 : 입력 상자에 입력 된 텍스트를 볼 수 없습니다. 선택을 누르면 facebook.com (??? wtf ???)으로 리디렉션됩니다.

업데이트 : (2013 년 11 월 14 일)

• 아이폰 OS 7.0.3 :에서 주석 덕분에 binki 해당 업데이트 .selectionStart및 .selectionEnd 수행 작업을.

업데이트 : (2015 년 1 월 15 일)

• iOS 8.xx : Michael Siebert 의 의견에 감사드립니다 . 댓글에서 발췌 : 포커스와 클릭 이벤트를 모두 수신 한 다음 setTimeout / _. debounce를 사용하여 두 경우 모두 작동하도록해야했습니다. 입력을 클릭하거나 탭을 통해 포커스를

---

죄송합니다. 이전 게시물에서 Javascript로 답변을 원한다는 것을 암시하는 Javascript를 알지 못했습니다.

당신이 원하는 것을 얻을 수 있는 UIWebView 와 자바 스크립트 , 나는 일에 그것을 얻을 함께 정보의 두 가지 중요한 부분을 긁어 냈다. 모바일 브라우저에 대해 잘 모르겠습니다.

1. element.setSelectionRange(0,9999); 우리가 원하는 것을한다

2. mouseUp 이벤트가 선택을 취소합니다.

따라서 (Prototype 사용) :

    input.observe ( 'focus', function () {
      this.setSelectionRange (0, 9999);
    });
    input.observe ( 'mouseup', function (event) {
      event.stop ();
    });

트릭을 수행합니다.

Matt

---

It looks like focus will work but only when directly called from a native event. calling focus using something like SetTimeout does not appear call up the keyboard. Control of the ios keyboard is very poor. Its not a good situation.

---

Something like the following is working for me for me on Webkit that comes with Android 2.2:

function trySelect(el) {
    setTimeout(function() {
        try {
            el.select();
        } catch (e) {
        }
    }, 0);
}

See Chromium Issue 32865.

---

With iOS 7 on iPad the only way that I was able to make this work was to use actually <textarea></textarea> instead of <input> field.

e.g.

<textarea onclick="this.setSelectionRange(0, 9999);">My text will be selected when textarea is clicked.</textarea>

How to prevent user from changing text inside area was more difficult, since is you make textarea readonly the selection trick won't work anymore.

---

I went nuts looking for this solution, while all your responses did help it opened another can of worms for me.

The client wanted the user to be able to click and select all, and also let the user 'tab' and select all on the iPad (with an external keyboard. I know, crazy...)

My solution to this problem was, rearrange the events. First Focus, then Click, then touchstart.

$('#myFUBARid').on('focus click touchstart', function(e){
  $(this).get(0).setSelectionRange(0,9999);
  //$(this).css("color", "blue");
  e.preventDefault();
});

I hope this helps someone, as you lot have helped me countless times.

---

If you are using HTML5-compliant browsers, you can use placeholder="xxx" in your input tag. That should do the job.

참고URL : https://stackoverflow.com/questions/3272089/programmatically-selecting-text-in-an-input-field-on-ios-devices-mobile-safari