Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.05.2017, 20:31
Новичок на форуме
Отправить личное сообщение для rfhnjirf Посмотреть профиль Найти все сообщения от rfhnjirf
 
Регистрация: 09.05.2017
Сообщений: 8

Введое в текстовое поле значение отображается в виде списка чекбоксов
1. Создайте текстовое поле для добавления контакта в список.
2. Каждая запись должна содержать имя, телефон и электронный адрес человека, информация о котором вносится в список контактов.
3. После нажатия клавиши Enter введенный контакт отображается в списке контактов. (Пустую строку текста в виде контакта добавить нельзя!)
4. Для добавления контакта проверьте корректность телефона и адреса электронной почты.
5. Список контактов представлен в виде компонента checkbox.
6. Если нажать на чекбокс - контакт считается важным, подчеркивается и становится красного цвета, чекбокс при этом пропадает.
7. Справа от каждой контакта располагается значок, позволяющий удалить указанный контакт.
8. Для выполнения редактирования контакта, необходимо выполнить по нему двойной щелчок, тогда вместо пункта списка появляется текстовое поле с текстом контакта.
9. После выполнения редактирования контакта, нужно нажать клавишу Enter и контакт изменится. Текстовое поле при этом исчезнет.
Изображения:
Тип файла: jpg Безымянный.jpg (29.2 Кб, 8 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 16.05.2017, 09:24
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,948

Список задач имеется, отсутствует главное - сам вопрос))
Ответить с цитированием
  #3 (permalink)  
Старый 16.05.2017, 10:51
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,326

Или сумма за решение той задачи...
Ответить с цитированием
  #4 (permalink)  
Старый 16.05.2017, 13:12
Новичок на форуме
Отправить личное сообщение для rfhnjirf Посмотреть профиль Найти все сообщения от rfhnjirf
 
Регистрация: 09.05.2017
Сообщений: 8

нужно именно как сделать чтобы при вводе и нажатии enter появлялся список контактов в виде чекбокса,помогите пожалуйста
Ответить с цитированием
  #5 (permalink)  
Старый 16.05.2017, 13:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,328

rfhnjirf,
разбей задачу на функции, потом их соедини ... начните, иначе в раздел работа.
может помочь поиск по форуму, подскажет многие примеры на подобную тему.
дока
про Enter
https://learn.javascript.ru/keyboard-events
про создание/удаление
https://learn.javascript.ru/modifying-document
Ответить с цитированием
  #6 (permalink)  
Старый 17.05.2017, 11:11
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,887

Что-то ТС замолчал... Надо его подбодрить.
Вариации на тему
<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>
Ответить с цитированием
  #7 (permalink)  
Старый 17.05.2017, 11:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,328

Dilettante_Pro,
в каких браузерах работает это
Цитата:
newInput.style =
?
Ответить с цитированием
  #8 (permalink)  
Старый 17.05.2017, 12:05
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,887

рони,
У меня в хроме прекрасно работает. В ИЕ - нет.
Так это я написал на троечку, для затравки
Ответить с цитированием
  #9 (permalink)  
Старый 17.05.2017, 12:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,328

Dilettante_Pro,
безопаснее так ...
newInput.style.cssText =
Ответить с цитированием
  #10 (permalink)  
Старый 17.05.2017, 12:21
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,887

рони,
Надо же и ТС что-то оставить
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
значение checkbox в текстовое поле Alfer Events/DOM/Window 0 20.09.2013 15:03
Выводить значение раньше переменных Гробовщик Общие вопросы Javascript 11 10.09.2013 07:42
Как ввести в поле ввода значение где есть javascript MOZG Общие вопросы Javascript 8 19.04.2013 09:28
самозакрывающееся меню в виде списка о_О dimitar Элементы интерфейса 4 20.03.2012 13:27
Нужно при вводе в текстовое поле тут же отобразить данный в другом месте klubnichkaaa AJAX и COMET 3 20.10.2011 19:46