내용 편집 가능한 div의 자리 표시자

내용 편집 가능한 div의 자리 표시자

다음이 있습니다: FIDDLE

자리 표시자는 + 및 를 입력할 때까지 잘 작동합니다.그러면 자리 표시자가 사라지고 다시는 나타나지 않습니다.

뭐가 잘못됐나요?어떻게 하면 만족스러운 디브를 위한 자리 표시자를 가질 수 있습니까?

HTML:

<div class="test" placeholder="Type something..." contenteditable="true"></div>

---

CSS:

.test {
    width: 500px;
    height: 70px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 5px;
}

.test[placeholder]:empty:before {
    content: attr(placeholder);
    color: #555; 
}

---

Thanks.

동일한 문제를 검색하는 동안 간단한 혼합 CSS-JavaScript 솔루션을 해결했습니다. 공유하고 싶은 것은 다음과 같습니다.

CSS:

[placeholder]:empty::before {
    content: attr(placeholder);
    color: #555; 
}

[placeholder]:empty:focus::before {
    content: "";
}

JavaScript:

jQuery(function($){
    $("[contenteditable]").focusout(function(){
        var element = $(this);        
        if (!element.text().trim().length) {
            element.empty();
        }
    });
});

업데이트된 피들

내용 편집 가능한 플레이스홀더 - 포커스 이벤트 문제

[contenteditable=true]:empty:not(:focus):before{
  content:attr(data-ph);
  color:grey;
  font-style:italic;
}

저는 이 솔루션을 https://codepen.io/flesler/pen/AEIFc 에서 얻었습니다.

기본적으로 다음 CSS 코드를 입력합니다.

[contenteditable=true]:empty:before{
  content: attr(placeholder);
  pointer-events: none;
  display: block; /* For Firefox */
}

그리고 당신의 편집 가능한 div에 자리 표시자 속성이 있습니다.

저는 라이브 데모를 만들었습니다: HTML & CSS의 "콘텐츠 편집 가능한 div를 위한 플레이스홀더".
또한, 코드펜: https://codepen.io/fritx/pen/NZpbqW
참조: https://github.com/fritx/vue-at/issues/39#issuecomment-504412421

.editor {
  border: solid 1px gray;
  width: 300px;
  height: 100px;
  padding: 6px;
  overflow: scroll;
}
[contenteditable][placeholder]:empty:before {
  content: attr(placeholder);
  position: absolute;
  color: gray;
  background-color: transparent;
}

<textarea class="editor"
  placeholder="Textarea placeholder..."
></textarea>
<br/>
<br/>
<div class="editor"
  contenteditable
  placeholder="Div placeholder..."
  oninput="if(this.innerHTML.trim()==='<br>')this.innerHTML=''"
></div>

무슨 뜻인지 알겠어요.당신의 바이올린에서 나는 몇 글자를 입력하고 'ctrl-a'와 'delete'를 사용하여 그것을 삭제했고 자리 표시자가 다시 나타났습니다.

를 'enter', 'enter', 'enter', 'enter', 'cild div', ' div', 'cild ', 'cild div', 'cild div', 'cild div', 'content div' 됩니다.<div><br></div>하위 요소가 없는 요소만 대상으로 하는 빈 유사 클래스에 문제를 만듭니다.**

크롬 개발자 도구나 사용하는 모든 것에서 확인하십시오.

출처: developer.mozilla.org

:empty pseudo-class는 자식이 전혀 없는 요소를 나타냅니다.요소 노드와 텍스트(공백 포함)만 고려됩니다.주석 또는 처리 지침은 요소가 비어 있다고 간주되는지 여부에 영향을 주지 않습니다.

Ctrl-a는 텍스트를 삭제하지만 하위 div는 그대로 둡니다.자바스크립트를 추가하여 이 문제를 해결할 수 있습니다.

몇 가지 수정 사항:

1)$element.text().trim().length그것은 문제를 해결했습니다.<div><br/></div>그리고. 

2)data-placeholder대신끌 대신 .placeholder은 입니다.

selector 통선기택공기택$("[contenteditable]")은 입니다.

4)display: inline-block;Chrome 및 Firefox용 수정 프로그램

JavaScript:

jQuery(function($){
    $("[contenteditable]").blur(function(){
        var $element = $(this);
        if ($element.html().length && !$element.text().trim().length) {
            $element.empty();
        }
    });
});

HTML:

<div data-placeholder="Type something..." contenteditable="true"></div>

CSS:

[contenteditable]:empty:before {
    content: attr(data-placeholder);
    color: grey;
    display: inline-block;
}

것 , 왜 을 안 요?contenteditable원소 돌연변이?모든 것을 내용을 변화시키는 사건과 결부시키려는 것은 골치 아픈 일입니다.단추를 추가하거나(예: 붙여넣기) 콘텐츠를 동적으로 변경해야 하는 경우(자바스크립트).제 접근 방식은 MutationObservers를 사용하는 것입니다.데모 피들

HTML:

<div class="test" id="test" placeholder="Type something..." contenteditable="true"></div>

CSS:

.test {
    width: 500px;
    height: 70px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 5px;
}

.test[placeholder]:empty:before {
    content: attr(placeholder);
    color: #555; 
}

JavaScript:

var target = document.querySelector('#test');
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
      if (target.textContent == '') {
          target.innerHTML = '';
      }
  });    
});
var config = { attributes: true, childList: true, characterData: true };
observer.observe(target, config);

Christian Brink의 답변을 업데이트하면 더 많은 이벤트를 확인할 수 있습니다.다음과 같은 작업을 수행하면 됩니다.

// More descriptive name
var $input = $(".placeholder");
function clearPlaceHolder() {
  if ($input.text().length == 0) {
    $input.empty();
    }
  }

// On each click
$input.keyup(clearPlaceHolder);

// Probably not needed, but just in case
$input.click(clearPlaceHolder);

// Copy/paste/cut events http://stackoverflow.com/q/17796731
$input.bind('input', (clearPlaceHolder));

// Other strange events (javascript modification of value?)
$input.change(clearPlaceHolder);

마지막으로 업데이트된 JSFidle

스위프트가 말했듯이, 당신은 매우 간단한 JS로 이것을 고칠 수 있습니다.jQuery 사용:

var $input = $(".test");
$input.keyup(function () {
    if ($input.text().length == 0) {
        $input.empty();
    }
});

각 키 입력 시 입력 텍스트가 있는지 확인합니다.그렇지 않은 경우 사용자가 요소와 상호 작용하여 남겨졌을 수 있는 하위 요소(예:<div>swifft 설명.

이 해결책은 저에게 효과가 있었습니다.저는 이 솔루션을 각진 자바스크립트에서 순수 자바스크립트로 변환했습니다.

.html 내

<div placeholder="Write your message.." id="MyConteditableElement" onclick="clickedOnInput = true;" contenteditable class="form-control edit-box"></div>

.css에서

.holder:before {
    content: attr(placeholder);
    color: lightgray;
    display: block;
    position:absolute;    
    font-family: "Campton", sans-serif;
}

js 단위로

clickedOnInput:boolean = false;
charactorCount:number = 0;
let charCount = document.getElementsByClassName('edit-box')[0];

if(charCount){
this.charactorCount = charCount.innerText.length;
}

if(charactorCount > 0 && clickedOnInput){
document.getElementById("MyConteditableElement").classList.add('holder');
}

if(charactorCount == 0 && !clickedOnInput){
document.getElementById("MyConteditableElement").classList.remove('holder');
}

getContent(innerText){
  this.clickedOnInput = false;
}

저는 이런 기능을 가지고 있고, 항상 이런 것들을 예방하기 위해 사용합니다.

나는 내 기능을 다음과 같은 방식으로 사용합니다.

var notEmpty = {}

    notEmpty.selector = ".no-empty-plz"
    notEmpty.event = "focusout"
    notEmpty.nonEmpty = "---"


    neverEmpty(notEmpty)

그리고 저는 비워두기 싫은 요소 I에 no-empty-plz를 추가할 뿐입니다.

/**
     * Used to prevent a element have a empty content, made to be used 
when we want to edit the content directly with the contenteditable=true 
because when a element is completely empty, it disappears U_U
     * 
     * @param selector
     * @param event
     * @param nonEmpty:
     *        String to be put instead empty
     */
function neverEmpty(params) {

    var element = $(params.selector)



    $(document).on(params.event, params.selector, function() {

        var text = $(this).html()
        text = hardTrim(text)

        if ($.trim(text)  == "") {
            $(this).html(params.nonEmpty)
        }
    });
}

params는 실제로 json이므로 선택기 = params입니다.보다시피 선택기

그리고 하드트림은 제가 만든 또 다른 기능으로 트림과 비슷하지만 &nbspand를 포함합니다.<br/>,기타

function hardTrim(text) {

    if (!exists(text)) {
        return ""
    }
    text = text.replace(/^\&nbsp\;|<br?\>*/gi, "").replace(/\&nbsp\;|<br?\>$/gi, "").trim();

    return text
}

이것은 나에게 효과가 있으며 입력이 너무 작으면 긴 자리 표시자를 자릅니다.

[contenteditable="true"][placeholder]:empty:before {
    content: attr(placeholder);
    position: absolute;
    left: 5px;
    font-size: 13px;
    color: #aaa;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    direction: ltr;
}

이는 Ctrl+A를 누른 후 삭제하면 내부에 <br>이 남아 있기 때문에 발생합니다.텍스트 영역의 HTML입니다.간단한 jQuery/javascript 솔루션으로 텍스트 영역을 비울 수 있습니다.

$(document).on('input','.test',function(){
    if(this.innerHTML == '<br>'){
        $(this).html('');
    }
});

let contenteditableDiv = document.getElementById('contenteditableDiv');

contenteditableDiv.addEventListener('focus', function() {
  let phs = this.querySelector('.placeholder-span');
  if (phs != null) {
    if (!this.hasOwnProperty('placeholderSpan')) {
      this.placeholderSpan = phs;
    }
    phs.remove();
    document.getSelection().setPosition(this, 0);
  }
});

contenteditableDiv.addEventListener('focusout', function() {
  if (this.textContent.trim().length == 0 && this.hasOwnProperty('placeholderSpan')) {
    this.replaceChildren(this.placeholderSpan);
  }
});

.placeholder-span {
  opacity: 0.5;
}

<div id="contenteditableDiv" contenteditable="true"><span class="placeholder-span">Type something...</span></div>

그리고 콘텐츠 편집 가능한 HTML 형식 문제(선행/추적 공간)를 피하고 일반인처럼 작성하려면 다음과 같이 하십시오.

<div id="contenteditableDiv" contenteditable="true">
    <span class="placeholder-span">Type something...</span>
</div>

그런 다음 추가:

window.addEventListener('load', function() {
    let contenteditableDiv = document.getElementById('contenteditableDiv');
    contenteditableDiv.innerHtml = contenteditableDiv.innerHtml.trim();
});

그리고 자리 표시자가 단위를 유지하기를 원한다면 입력이 있습니다. 입력 및 입력 이벤트 수신기를 입력하기 전에 마우스다운에 적절한 논리를 입력해야 합니다.

언급URL : https://stackoverflow.com/questions/20726174/placeholder-for-contenteditable-div