Как сделать поле ввода как текстовое поле с заполнителем для ввода пароля?

У меня есть задача, которая требует наличия многострочного поля ввода с текстом-заполнителем, но позволяет пользователю вводить пароль (поле пароля на следующем изображении):

Но когда пользователь щелкает (я имею в виду фокус) это поле пароля, я хочу, чтобы оно стало полем ввода с одной строкой. Как мне это сделать ?

Следующая строка просто не работает

<input type=password name=newpassword multiline placeholder = "xxxxxxxxx xxxx xxxx xxxx">

Любые подсказки будут высоко оценены.

javascript html

11.12.2020 00:46

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

144

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Начните читать с // magic below, чтобы увидеть мое решение:

//<![CDATA[
/* js/external.js */
let get, post, doc, htm, bod, nav, M, I, mobile, beacon, S, Q, hC, aC, rC, tC; // for use on other load
addEventListener('load', ()=>{
get = (url, func, responseType = 'json', context = null)=>{
  const x = new XMLHttpRequest;
  const c = context || x;
  x.open('GET', url); x.responseType = responseType;
  x.onload = ()=>{
    if (func)func.call(c, x.response);
  }
  x.onerror = e=>{
    if (func)func.call(c, {xhrErrorEvent:e});
  }
  x.send();
  return x;
}
post = (url, send, func, responseType ='json', context = null)=>{
  const x = new XMLHttpRequest;
  if (typeof send === 'object' && send && !(send instanceof Array)){
    const c = context || x;
    x.open('POST', url); x.responseType = responseType;
    x.onload = ()=>{
      if (func)func.call(c, x.response);
    }
    x.onerror = e=>{
      if (func)func.call(c, {xhrErrorEvent:e});
    }
    let d;
    if (send instanceof FormData){
      d = send;
    }
    else{
      let s;
      d = new FormData;
      for(let k in send){
        s = send[k];
        if (typeof s === 'object' && s)s = JSON.stringify(s);
        d.append(k, s);
      }
    }
    x.send(d);
  }
  else{
    throw new Error('send argument must be an Object');
  }
  return x;
}
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
beacon = (url, send)=>{
  let r = false;
  if (typeof send === 'object' && send && !(send instanceof Array)){
    let d;
    if (send instanceof FormData){
      d = send;
    }
    else{
      let s;
      d = new FormData;
      for(let k in send){
        s = send[k];
        if (typeof s === 'object' && s)s = JSON.stringify(s);
        d.append(k, s);
      }
    }
    r = nav.sendBeacon(url, d);
  }
  else{
    throw new Error('send argument must be an Object');
  }
  return r;
}
S = (selector, within)=>{
  let w = within || doc;
  return w.querySelector(selector);
}
Q = (selector, within)=>{
  let w = within || doc;
  return w.querySelectorAll(selector);
}
hC = (node, className)=>{
  return node.classList.contains(className);
}
aC = function(){
  const a = [...arguments];
  a.shift().classList.add(...a);
  return aC;
}
rC = function(){
  const a = [...arguments];
  a.shift().classList.remove(...a);
  return rC;
}
tC = function(){
  const a = [...arguments];
  a.shift().classList.toggle(...a);
  return tC;
}
// magic below - Library for reuse above - you can put code below on another page using a load event - except the `}); // end load
const ta = I('ta'), ta_pass = I('ta_pass'), pa = I('pa'), pass = I('pass');
ta_pass.onfocus = ()=>{
  aC(ta, 'hid'); pass.value = ''; rC(pa, 'hid'); pass.focus();
}
pass.onblur = function(){
  if (this.value.trim() === ''){
    aC(pa, 'hid'); rC(ta, 'hid');
  }
}
}); //end load
//]]>

/* css/external.css */
*{
  box-sizing:border-box; font-size:0; color:#000; padding:0; margin:0; overflow:hidden;
}
html,body,.main{
  width:100%; height:100%;
}
.main{
  background:#333; padding:10px; overflow-y:auto;
}
.main *{
  color:#fff; font:bold 22px Tahoma, Geneva, sans-serif; text-shadow:-1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000;
}
.main input,.main textarea{
  width:100%; background:#fff; color:#000; text-shadow:none; padding:3px 5px; border:none; box-shadow:none; border-radius:3px;
}
.main textarea{
  resize:none;
}
.hid{
  display:none;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Title Here</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div class='main'>
    <div id='ta'>
      <label for='ta_pass'>Password</label><textarea id='ta_pass' rows='3' readonly='readonly'>This is what will be your .defaultValue (not in use) in JavaScript - Looks like I'm going to add more text for testing purposes</textarea>
    </div>
    <div class='hid' id='pa'>
      <label for='pass'>Password</label><input id='pass' type='password' value='' />
    </div>
  </div>
</body>
</html>

11.12.2020 01:27

Вы можете использовать следующий метод для динамического изменения размера текстовой области:

function checkpw1() {

 text=(document.getElementById('password1').value);
  
var match = /\r|\n/.exec(text);
if (match) {
document.getElementById('password1').value=  text.slice(0, -1)
}  

// the above is to ignore user pressing enter key

  
  
var x1=document.getElementById('password1').value;

if (x1.length==0) { document.getElementById('password1').style.height = "70px";
} else {
document.getElementById('password1').style.height = "20px";
}   

}

<textarea
id=password1


onkeyup = "javascript:checkpw1();"

placeholder = "Default Password: Your Date of Birth in the format of YYYYMMDD, but use your new password if you have updated it."
type=password name=pin style = "padding:10px;max-width:100%;width:280px;height:70px;-webkit-text-security : circle; resize: none;overflow:hidden"
></textarea>

Спасибо. Это именно то, что я хотел. Хорошо, что ваши коды также будут повторно отображать исходный заполнитель, когда пользователь стирает все символы в поле пароля.

— 11.12.2020 05:34

11.12.2020 05:28