如何使用占位符制作像文本框一样的输入框以输入密码？

Question

I have a task which requires to have a multi-lines input box with placeholder text, but allowing user to enter password (the following picture's password field):我有一个任务需要有一个带有占位符文本的多行输入框，但允许用户输入密码（下图的密码字段）：

But when the user clicks (I mean get focus on) this password field, I want it to become a single line input box.但是当用户点击（我的意思是关注）这个密码字段时，我希望它成为一个单行输入框。 How can I do it?我该怎么做？

The following line just does not work以下行不起作用

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

Any hints will be much appreciated.任何提示将不胜感激。

Answer 1

Start reading at // magic below to see my solution:从// 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>

Answer 2

You may use the following method to dynamcially resize the textarea:您可以使用以下方法动态调整文本区域的大小：

 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>

如何使用占位符制作像文本框一样的输入框以输入密码？

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-12-11 00:27:58

解决方案2
0 2020-12-11 04:28:54

如何使用占位符制作像文本框一样的输入框以输入密码？

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-12-11 00:27:58

解决方案2 0 2020-12-11 04:28:54

解决方案1
1 已采纳 2020-12-11 00:27:58

解决方案2
0 2020-12-11 04:28:54