0

Здравствуйте, ребята помогите с js пожалуйста, есть contenteditable (простой див блок), и когда копируешь например текст с стилями или кнопку например, то оно вставляет в это поле элемент со стилем, не сбрасывает его как в обычных инпутах, как скидывать эти стили подскажите пожалуйста..

Codepen

3
  • 1
    Ничего не понял. Кто куда копирует? Ctrl+C что ли?) 11 ноя 2017 в 20:38
  • ** Кого интересует [нашел вот ответ](https://codepen.io/anon/pen/qVmWpE) -------------------------------- ** 21 ноя 2017 в 15:52
  • codepen.io/anon/pen/qVmWpE 21 ноя 2017 в 15:53

1 ответ 1

1

var block = document.querySelector(".t");
  

block.oninput = function(){
  var span = document.querySelectorAll(".t span");
  for(var i = 0; i < span.length; i++){
    span[i].style = "";
  }
}
.t {
    height: auto;
    min-height: 150px;
    width: 250px;
    border: 1px solid #666;
    background: #eee;
    padding: 5px 7px;
}

.p {
    background: #009baa;
    width: 250px;
    border: 1px solid #666;
    padding: 5px 7px;
}
<div class="t" contenteditable></div>
<div class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><div class="t" contenteditable></div>
<div class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus facilis quod quas magni nemo nam tempora libero optio itaque. Natus!</div>

8
  • Будь другом, объясни, что ты понял из вопроса и что значит твой ответ?
    – Air
    11 ноя 2017 в 20:57
  • @Air кодпен открой, дальше интуитивно все понятно :)
    – websnap
    11 ноя 2017 в 20:57
  • в том то и дело, у меня не открылся, простоянно перегружантся
    – Air
    11 ноя 2017 в 20:59
  • @Air у него два блока: один обычный с текстом и фоном. Другой contenteditable. Когда из первого копируешь текст во второй (ctrl+c ctrl+v) во второй блок текст вставляется спаном с прописанными инлайн стилями из первого блока. span появляется только в DOM. я хз как вся эта магия работает.
    – websnap
    11 ноя 2017 в 21:02
  • @Air скопируй мой код, убери скрипт и попробуй из синего блока скопировать текст в блок с contenteditable. Так понятней будет
    – websnap
    11 ноя 2017 в 21:05

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.