부분적으로 편집 가능한 텍스트 영역을 만드는 방법이 있습니까? (텍스트 부분 만 편집 가능)

Question

텍스트 부분 (텍스트가 이전에로드 된 부분) 만 편집 가능하고 다른 부분은 편집 할 수없는 우아한 해결책이 생겼습니다 ("회색으로 표시됩니다 ", 말하자면).

일반적으로 자바 스크립트를 사용하여이 모든 작업을 수행 할 수 있습니까?

jQuery가 사용됩니다.

Answer 1

는이 (단지 설명 생각, 아니 코드)를 할 수 있습니다. 수정할 수없는 부분에는 고정 된 문자열을 사용하고 수정 가능한 부분에는 [\s\S]*?을 사용하십시오. 정규 표현식을 고정하려면 ^ 및 $을 사용하십시오.

/^This is fixed text\. Now something editable:[\s\S]*?Now fixed again\.$/ 

이제 keyup 이벤트에 반응하고, 아마 다른 이벤트뿐만 아니라 (paste을 같은).

모든 관련 이벤트에서 정규 표현식이 여전히 일치하는지 확인하십시오.

그렇지 않으면 이벤트를 취소하십시오.

효과적으로 정규 표현식에서 리터럴 인 부분에 대한 수정을 중단하고 텍스트의 특정 부분을 읽기 전용으로 만들어야합니다.

양식 게시 후에도 서버 측 문자열을 테스트하는 것을 잊지 마십시오. 클라이언트가 잘못된 값을 보낼 수 없다고 절대로 믿지 마십시오.

---

편집하는 것은

당신은 동적 문자열에서 해당 정규식을 구축하는 정규식 견적 기능을 사용할 수 있습니다, 이것은 당신에게 번거 로움을 많이 저장해야합니다.

function regexQuote(s) { return s.replace(/[\[\]^$*+?{}.|\\]/g, "\\$&") } 

사용

var re = new Regex(
    "^" + 
    [regexQuote(fixedPart1), regexQuote(fixedPart2)].join("[\\s\\S].*?") 
    + "$" 
); 

Answer 2

흥미로운 생각이지만, 슬프게도 텍스트 영역 내의 텍스트는 균일하게 처리해야합니다. 즉, 텍스트 영역 내용의 하위 섹션을 비활성화 할 수 없습니다.

그러나 옵션이 있습니다. 사용 중지해야하는 텍스트를 식별 할 수있는 경우 DOM 요소 (예 : div)로 추가 한 다음 텍스트 영역 내부에 있음을 의미하는 방식으로 텍스트를 배치 할 수 있습니다.

이 div는 텍스트 영역을 크게 만들고 position : relative/absolute 스타일을 사용하여 텍스트 영역 위에 div를 이동시킬 수 있습니다. 또는 텍스트 영역의 테두리를 제거하고 div w/"disabled"텍스트가 포함 된 컨테이너에 배치 할 수 있습니다.

Answer 3

평범한 텍스트 영역 요소를 사용하는 경우 필요한 콘텐츠의 스타일을 수정할 수 없습니다 (해당 콘텐츠를 편집 할 수 있는지 여부에 따라). 기껏해야 사용자가 변경하려고하는 콘텐츠가 블랙리스트 또는 화이트리스트에 있는지 확인하고 편집을 중지할지 여부를 확인할 수 있습니다. "할 수 없다"는 경고 메시지와 같은 시각적 인 피드백을 제공 할 수도 있습니다.

제 생각에는 contenteditable 속성을 사용하는 것이 좋습니다. 스타일을 지정하는 데 약간 시간이 걸리지 만 장기적으로 더 큰 유연성을 부여 할 것입니다.

div 요소의 스타일을 지정하여 필요한 텍스트 영역과 비슷하게 만들 수 있으며, 편집 가능한 범위를 사용하여 특정 텍스트 블록을 편집 할 수 있는지 여부를 설정할 수 있습니다. 그런 다음 JavaScript 명령을 사용하거나 (위 링크 참조) "저장"버튼을 사용하여이 내용을 검색하고 숨겨진 실제 텍스트 영역의 값으로 설정하고 정상적으로 페이지를 게시 할 수 있습니다.

대략적인 예로서 다음 코드를 사용하십시오.

<div id="editable-content"> 
    <span id="block1" class="editable" contenteditable="true">This is some editable content which will </span> 
    <span id="block2" class="non-editable">quickly be followed by some non-editable content</span> 
</div> 
<div style="display: none;"> 
    <textarea id="PostedContent"></textarea> 
</div> 
<div> 
    <input id="save-page" type="submit" value="Save Page" /> 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $('#save-page').click(function() { 
      $('#PostedContent').val($('#editable-content').text()); 
     }); 
    }); 
</script> 

Answer 4

차라리 편집/편집 할 컨텐츠의 하위 문자열로 input의 내용을 깨려고보다 좋을 것

, 당신은 HTML 요소의 contentEditable 속성을 사용하고 있음을 전달하는 자바 스크립트를 사용하여 편집 된 값을 다른 페이지의 input에 숨긴다.

가 전체 텍스트와 일치하는 정규식을 고안 :

Answer 5

글쎄, 당신은 이 뭔가를 할 수 있습니다. 이 코드는 매우 비효율적입니다. 개념을 개략적으로 설명하려고합니다.

JS : 이것은 당신의 생각 사용

<textarea id="t" rows=5 cols="80">Hello this is a test @{stuff} 

     this part is editable @{other stuff}  

    </textarea> 

$(function() { 
      var tb = $("#t").get(0); 
      $("#t").keydown(function (event) { 
       var start = tb.selectionStart; 
       var end = tb.selectionEnd; 
       var reg = new RegExp("(@{.+?})", "g"); 
       var amatch = null; 
       while ((amatch = reg.exec(tb.value)) != null) { 
        var thisMatchStart = amatch.index; 
        var thisMatchEnd = amatch.index + amatch[0].length; 
        if (start <= thisMatchStart && end > thisMatchStart) { 
         event.preventDefault(); 
         return false; 
        } 
        else if (start > thisMatchStart && start < thisMatchEnd) { 
         event.preventDefault(); 
         return false; 
        } 
       } 
      }); 
     }); 

HTML "마커를." 일반적인 생각은 사용자가 마커 중 하나에서 편집하려고하는 텍스트 범위입니다. 분명히 키를 누를 때마다 정규식을 사용하는 것이 가장 좋은 방법은 아니며 화살표 키 등을 무시하지 않을 것이지만 이것은 일반적인 생각을 제공합니다.

부모 요소에서

Answer 6

, 당신은 고체 회색 x 1 픽셀에 경계를 설정할 수 있습니다 다음이 내부뿐만 아니라

1) 텍스트 영역 (테두리가없는 위해 CSS를 수정) 2) 라벨 (테두리 없음을 넣어)

이 경우 1)과 2)의 두 텍스트가 하나의 상자에 있기 때문에 함께 표시됩니다. 1) 편집 가능하지만 다른 하나는 회색으로 표시됩니다.

Answer 7

(예를 그 단 하나의