Показать сообщение отдельно
  #6 (permalink)  
Старый 17.05.2017, 11:11
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Что-то ТС замолчал... Надо его подбодрить.
Вариации на тему
<div id="container">
   <div style="border:1px solid black">
       <input type="text" id="new" placeholder="Введите новый контакт" style="margin-left:21px; width: 250px;">
   </div>
</div>
<script>
function setRed() {
    this.nextSibling.style="display:inline; width: 250px;color:red";
    this.style="opacity:0;";
}
function removeThis() {
      container.removeChild(this.parentNode);
}
function enableThis() {
      this.querySelector('input:disabled').disabled = false;
}
function disableThis() {
     this.disabled = true;
}
function checkText(text) {
     if(text.length<10) return true;
     var arr = text.split(" ");
     if (arr.length < 3) return true;
     var eMail = arr[arr.length - 1];
     var re = /^[\w-\.]+@[\w-]+\.[a-z]{2,4}$/i;
     if(!re.test(eMail)) return true;
     var phone = '';
     for(var i = 1; i < arr.length - 1; i++) {
         phone = phone + arr[i];
     }
     re = /^\d[\d\(\)\ -]{4,14}\d$/;
     if(!re.test(phone)) return true;
}
document.querySelector("#new").onchange = function() {
    var newText = this.value;
    var errorText = checkText(newText);
    if(errorText) return;
    var newDiv = document.createElement('div');
    newDiv.style = "height:22px; border:1px solid black;";
    newDiv.ondblclick = enableThis;
    container.appendChild(newDiv);

    var newInput = document.createElement('input');
    newInput.type = "checkbox";
    newInput.style = "display:inline;";
    newInput.onclick = setRed;
    newDiv.appendChild(newInput);
    newInput.focus();

    newInput = document.createElement('input');
    newInput.value = newText;
    newInput.style = "display:inline; width: 250px;";
    newInput.onchange = disableThis;
    newInput.disabled = "true";
    
    newDiv.appendChild(newInput);

    newInput = document.createElement('input');
    newInput.type = "button";
    newInput.style = "display:inline;  border:1px solid red; border-radius:10px; color:red;";
    newInput.value="X";
    newInput.onclick = removeThis;
    newDiv.appendChild(newInput);    
    
    this.value = "";
}
</script>
Ответить с цитированием