如何制作一个类似文本框的输入框，带有Placeholder用于输入密码？

Question

我有一个任务需要有一个带有占位符文本的多行输入框，但允许用户输入密码（下图的密码字段）：

但是当用户单击（我的意思是集中注意力）这个密码字段时，我希望它成为一个单行输入框。我该怎么做 ？

以下行不起作用

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

任何提示将不胜感激。

Answer 1

开始阅读// 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 loadaddEventListener('load', ()=>{get = (url, func, responseType = 'json', context = null)=>{&nbsp; const x = new XMLHttpRequest;&nbsp; const c = context || x;&nbsp; x.open('GET', url); x.responseType = responseType;&nbsp; x.onload = ()=>{&nbsp; &nbsp; if(func)func.call(c, x.response);&nbsp; }&nbsp; x.onerror = e=>{&nbsp; &nbsp; if(func)func.call(c, {xhrErrorEvent:e});&nbsp; }&nbsp; x.send();&nbsp; return x;}post = (url, send, func, responseType ='json', context = null)=>{&nbsp; const x = new XMLHttpRequest;&nbsp; if(typeof send === 'object' && send && !(send instanceof Array)){&nbsp; &nbsp; const c = context || x;&nbsp; &nbsp; x.open('POST', url); x.responseType = responseType;&nbsp; &nbsp; x.onload = ()=>{&nbsp; &nbsp; &nbsp; if(func)func.call(c, x.response);&nbsp; &nbsp; }&nbsp; &nbsp; x.onerror = e=>{&nbsp; &nbsp; &nbsp; if(func)func.call(c, {xhrErrorEvent:e});&nbsp; &nbsp; }&nbsp; &nbsp; let d;&nbsp; &nbsp; if(send instanceof FormData){&nbsp; &nbsp; &nbsp; d = send;&nbsp; &nbsp; }&nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; let s;&nbsp; &nbsp; &nbsp; d = new FormData;&nbsp; &nbsp; &nbsp; for(let k in send){&nbsp; &nbsp; &nbsp; &nbsp; s = send[k];&nbsp; &nbsp; &nbsp; &nbsp; if(typeof s === 'object' && s)s = JSON.stringify(s);&nbsp; &nbsp; &nbsp; &nbsp; d.append(k, s);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; x.send(d);&nbsp; }&nbsp; else{&nbsp; &nbsp; throw new Error('send argument must be an Object');&nbsp; }&nbsp; 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)=>{&nbsp; let r = false;&nbsp; if(typeof send === 'object' && send && !(send instanceof Array)){&nbsp; &nbsp; let d;&nbsp; &nbsp; if(send instanceof FormData){&nbsp; &nbsp; &nbsp; d = send;&nbsp; &nbsp; }&nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; let s;&nbsp; &nbsp; &nbsp; d = new FormData;&nbsp; &nbsp; &nbsp; for(let k in send){&nbsp; &nbsp; &nbsp; &nbsp; s = send[k];&nbsp; &nbsp; &nbsp; &nbsp; if(typeof s === 'object' && s)s = JSON.stringify(s);&nbsp; &nbsp; &nbsp; &nbsp; d.append(k, s);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; r = nav.sendBeacon(url, d);&nbsp; }&nbsp; else{&nbsp; &nbsp; throw new Error('send argument must be an Object');&nbsp; }&nbsp; return r;}S = (selector, within)=>{&nbsp; let w = within || doc;&nbsp; return w.querySelector(selector);}Q = (selector, within)=>{&nbsp; let w = within || doc;&nbsp; return w.querySelectorAll(selector);}hC = (node, className)=>{&nbsp; return node.classList.contains(className);}aC = function(){&nbsp; const a = [...arguments];&nbsp; a.shift().classList.add(...a);&nbsp; return aC;}rC = function(){&nbsp; const a = [...arguments];&nbsp; a.shift().classList.remove(...a);&nbsp; return rC;}tC = function(){&nbsp; const a = [...arguments];&nbsp; a.shift().classList.toggle(...a);&nbsp; return tC;}// magic below - Library for reuse above - you can put code below on another page using a load event - except the `}); // end loadconst ta = I('ta'), ta_pass = I('ta_pass'), pa = I('pa'), pass = I('pass');ta_pass.onfocus = ()=>{&nbsp; aC(ta, 'hid'); pass.value = ''; rC(pa, 'hid'); pass.focus();}pass.onblur = function(){&nbsp; if(this.value.trim() === ''){&nbsp; &nbsp; aC(pa, 'hid'); rC(ta, 'hid');&nbsp; }}}); //end load//]]>/* css/external.css */*{&nbsp; box-sizing:border-box; font-size:0; color:#000; padding:0; margin:0; overflow:hidden;}html,body,.main{&nbsp; width:100%; height:100%;}.main{&nbsp; background:#333; padding:10px; overflow-y:auto;}.main *{&nbsp; 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{&nbsp; width:100%; background:#fff; color:#000; text-shadow:none; padding:3px 5px; border:none; box-shadow:none; border-radius:3px;}.main textarea{&nbsp; resize:none;}.hid{&nbsp; display:none;}<!DOCTYPE html><html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>&nbsp; <head>&nbsp; &nbsp; <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />&nbsp; &nbsp; <title>Title Here</title>&nbsp; &nbsp; <link type='text/css' rel='stylesheet' href='css/external.css' />&nbsp; &nbsp; <script src='js/external.js'></script>&nbsp; </head><body>&nbsp; <div class='main'>&nbsp; &nbsp; <div id='ta'>&nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class='hid' id='pa'>&nbsp; &nbsp; &nbsp; <label for='pass'>Password</label><input id='pass' type='password' value='' />&nbsp; &nbsp; </div>&nbsp; </div></body></html>

Answer 2

您可以使用以下方法动态调整文本区域的大小：function checkpw1() {&nbsp;text=(document.getElementById('password1').value);&nbsp;&nbsp;var match = /\r|\n/.exec(text);if (match) {document.getElementById('password1').value=&nbsp; text.slice(0, -1)}&nbsp;&nbsp;// the above is to ignore user pressing enter key&nbsp;&nbsp;&nbsp;&nbsp;var x1=document.getElementById('password1').value;if (x1.length==0) { document.getElementById('password1').style.height="70px";} else {document.getElementById('password1').style.height="20px";}&nbsp; &nbsp;}<textareaid=password1onkeyup="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>