Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.04.2016, 11:12
Новичок на форуме
Отправить личное сообщение для Максим Горский Посмотреть профиль Найти все сообщения от Максим Горский
 
Регистрация: 18.04.2016
Сообщений: 5

Как заблокировать первую часть value?
Всем привет. Очень нужна помощь.
Собственно, из названия темы все понятно, нужно ограничить возможность удаления value до определенного слова.
Пример:
<input type="text" class="email" value="Email: test@mail.ru" placeholder="">

Нужно сделать так, чтобы "Email: " удалить было нельзя. Желательно, чтобы валидация по нему не происходила. Это возможно? Вставить текст при помощи CSS и сделать padding не предлагать. "Email: " должен быть частью value.

Последний раз редактировалось Максим Горский, 18.04.2016 в 11:17.
Ответить с цитированием
  #2 (permalink)  
Старый 18.04.2016, 11:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,183

Максим Горский,
текст нельзя стереть
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
   <script>
   window.addEventListener('DOMContentLoaded', function() {
     var email = document.querySelector('.email'),
     str = 'Email: ';
     email.addEventListener('input', function() {
        this.value = str + this.value.slice(str.length);
     });
       });
  </script>
</head>

<body>
<input type="text" class="email" value="Email: test@mail.ru" placeholder="">

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 18.04.2016, 12:00
Новичок на форуме
Отправить личное сообщение для Максим Горский Посмотреть профиль Найти все сообщения от Максим Горский
 
Регистрация: 18.04.2016
Сообщений: 5

рони, Спасибо Вам огромное, то что нужно, а если инпутов несколько? Как правильней написать? Или просто дублировать код?
Ответить с цитированием
  #4 (permalink)  
Старый 18.04.2016, 14:05
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,776

Сообщение от Максим Горский
"Email: " должен быть частью value
А зачем?
Ответить с цитированием
  #5 (permalink)  
Старый 18.04.2016, 15:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,183

Сообщение от Максим Горский
а если инпутов несколько?
и все
Сообщение от Максим Горский
чтобы "Email: "
?
Ответить с цитированием
  #6 (permalink)  
Старый 18.04.2016, 15:39
Новичок на форуме
Отправить личное сообщение для Максим Горский Посмотреть профиль Найти все сообщения от Максим Горский
 
Регистрация: 18.04.2016
Сообщений: 5

рони,
Нет, разные, к примеру, если:
<input type="text" class="email" value="Email: test@mail.ru" placeholder="">
<input type="text" class="first_name" value="Имя: Максим" placeholder="">
<input type="text" class="last_name" value="Фамилия: Горский" placeholder="">
<input type="text" class="sex" value="Пол: Мужской" placeholder="">

Хорошо ли будет просто дублировать код с другими значениями? Или можно написать как-то правильней?
Ответить с цитированием
  #7 (permalink)  
Старый 18.04.2016, 15:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,183

начало текста в input нельзя стереть
Максим Горский,
а зачем?
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
   <script>
   window.addEventListener('DOMContentLoaded', function() {
     var inp = document.querySelectorAll('[placeholder]');
     [].forEach.call(inp, function(item) {
             var str = item.value.split(' ')[0]+' ';
             item.addEventListener('input', function() {
                 this.value = str + this.value.slice(str.length);
             });
         });
       });
  </script>
</head>

<body>
<input type="text" class="email" value="Email: test@mail.ru" placeholder="">
<input type="text" class="first_name" value="Имя: Максим" placeholder="">
<input type="text" class="last_name" value="Фамилия: Горский" placeholder="">
<input type="text" class="sex" value="Пол: Мужской" placeholder="">


</body>
</html>

Последний раз редактировалось рони, 18.04.2016 в 15:58.
Ответить с цитированием
  #8 (permalink)  
Старый 18.04.2016, 16:45
Новичок на форуме
Отправить личное сообщение для Максим Горский Посмотреть профиль Найти все сообщения от Максим Горский
 
Регистрация: 18.04.2016
Сообщений: 5

рони,
Большое спасибо, то, что нужно!) Что зачем?
Ответить с цитированием
  #9 (permalink)  
Старый 18.04.2016, 17:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,183

Максим Горский,
зачем сохранять? может в label записать?
<label>Email: <input type="text" class="email" value="test@mail.ru" placeholder=""></label>
Ответить с цитированием
  #10 (permalink)  
Старый 18.04.2016, 18:02
Новичок на форуме
Отправить личное сообщение для Максим Горский Посмотреть профиль Найти все сообщения от Максим Горский
 
Регистрация: 18.04.2016
Сообщений: 5

рони, По макету нужно именно в инпуте вписать. Не хотел отрицательными мэрджинами текст вставлять.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 11:29
как получить первую видимую строку в переменную ? mitiya Общие вопросы Javascript 23 30.06.2012 22:29
Как заблокировать checkbox кроме выделенных YCsys Events/DOM/Window 5 06.06.2012 16:34
как "выхватить" часть числа POLOS Общие вопросы Javascript 1 17.03.2009 11:55
Как с помощью JS "на-лету" менять часть HTML кода greendoc Общие вопросы Javascript 2 18.03.2008 19:43