2012-11-13 5 views
5

에서 읽기 전용 텍스트 영역 복사 가능한을 만들기 위해 아이폰 OS-장치에서 textareainput type="text"highlightable복사 가능한?HTML : 어떻게 어떻게해야합니까 아이폰 OS-장치

이 작동하지 않습니다

<textarea readonly="readonly">Totally readonly, cannot be copied</textarea> 

을 어느 쪽도하지 않습니다 :

<textarea disabled="disabled">Totally readonly, cannot be copied</textarea> 

편집 : 텍스트 영역이 지속적으로 업데이트되는, 그래서 그것의 일회성 변환하지 않습니다 작업.

텍스트 영역의 콘텐츠는 HTML 일 수도 있습니다. 페이지의 모든 읽기 전용 텍스트 영역을 찾아 읽기 전용 필드 대신 내용으로 사업부를 렌더링 할 수 http://jsfiddle.net/sebnilsson/jfvWZ/

+1

사용자가 텍스트를 선택하고 복사 가능하게 유지하면서 수정하는 것을 방지하고 싶습니까? – Hejazi

+0

@Hejazi 예, 맞습니다! –

+0

텍스트를 복사하는 textView 위에 보이지 않는 버튼을 배치하거나 "복사"라는 텍스트 옆에 버튼을 배치 할 수 있습니다. – AMayes

답변

6

하나의 솔루션 :

는 내가 이걸으로 테스트되었습니다 JSFiddle 있습니다. 나는 이것을 보여주기 위해 아주 간단한 JS를 작성했다.

$('textarea[readonly]').removeAttr('readonly').each(function() { 
    var $this = $(this); 
    $this.hide().after('<div data-textarea="' + $this.attr('id') 
     + '" class="textarea">' + $this.val() + '</div>'); 
}).on('textareachange', function() { 
    var $this = $(this); 
    $('[data-textarea="' + $this.attr('id') + '"]').html($this.val()); 
}); 

의 라인을 따라

뭔가 당신은 또한 당신이 텍스트 영역의 값을 업데이트 할 때 이벤트를 트리거해야합니다. 예를

$('textarea').val('test').trigger('textareachange'); 

들어 가지 등 스타일에 대한 예제 내 아이폰에 일부 텍스트를 선택 성공적인했습니다

http://jsfiddle.net/ssfUx/3/

+0

내 문제의 제약 조건이 아니라면이 방법이 효과적입니다. 죄송합니다. 질문을 업데이트했습니다. –

+0

아,이 문제를 해결하기 위해 위의 답변을 업데이트했습니다. – JohnC

+0

Seb 편집에 스 니펫에없는 기능이 있습니다 – JohnC

0

으로 여기에 더 광범위한 예,하지만 많은 시도를해야합니다.

<textarea readonly onfocus="this.blur();">Totally readonly, CAN BE copied</textarea> 

마지막 : http://jsfiddle.net/jfvWZ/6/

<div> 
    <label>Plain div</label><br /> 
    <div id="plain-div" onFocus="this.blur();"> 
     Plain div 
    </div> 
</div> 

쉬운 마찬가지로이 문제에 달렸다 아이폰

+0

JSFiddle이 업데이트되어 최신 iOS가 설치된 iPhone 5에서 작동하지 않습니다. http://jsfiddle.net/jfvWZ/ div에서 복사 할 수 있다는 것이 결코 문제되지 않았습니다. –

0

의 텍스트를 선택합니다.

다음이보기 흉하지 않은, 올바른 또는 의미 론적 대안인지 확실하지 않지만 저에게 도움이되었습니다.

단순히 textarea를 div 읽기 전용으로 변경했으며 동일한 스타일이 적용되었습니다.

JavaScript의 단점은 this [ 'myForm']을 사용하여 div를 타겟팅 할 수 없다는 것입니다. DOM에서 form 요소의 하위 요소로 보이지 않습니다.

대신 id로 요소를 가져와 textarea와 같이 값을 설정하는 대신 innerHTML을 설정해야했습니다.

Ipad 1 IOS5 및 Iphone 4s IOS7에서 작동하여 이제 클립 보드로 텍스트를 선택하고 복사 할 수 있습니다.