Форум

Максим Горский · #1 (**permalink**) 18.04.2016, 11:12

Всем привет. Очень нужна помощь.
Собственно, из названия темы все понятно, нужно ограничить возможность удаления value до определенного слова.
Пример:

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

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

рони · #2 (**permalink**) 18.04.2016, 11:39

Максим Горский,
текст нельзя стереть

<!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

рони, Спасибо Вам огромное, то что нужно, а если инпутов несколько? Как правильней написать? Или просто дублировать код?

laimas · #4 (**permalink**) 18.04.2016, 14:05

Сообщение от Максим Горский

"Email: " должен быть частью value

А зачем?

рони · #5 (**permalink**) 18.04.2016, 15:21

Сообщение от Максим Горский

а если инпутов несколько?

и все

Сообщение от Максим Горский

чтобы "Email: "

?

Максим Горский · #6 (**permalink**) 18.04.2016, 15:39

рони,
Нет, разные, к примеру, если:

<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

Максим Горский,
а зачем?

<!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>

Максим Горский · #8 (**permalink**) 18.04.2016, 16:45

рони,
Большое спасибо, то, что нужно!) Что зачем?

рони · #9 (**permalink**) 18.04.2016, 17:06

Максим Горский,
зачем сохранять? может в label записать?

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

Максим Горский · #10 (**permalink**) 18.04.2016, 18:02

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

Форум

Справочник

Discord чат

Курсы javascript