我有一个任务需要有一个带有占位符文本的多行输入框，但允许用户输入密码（下图的密码字段）：但是当用户单击（我的意思是集中注意力）这个密码字段时，我希望它成为一个单行输入框。我该怎么做 ？以下行不起作用<input type=password name=newpassword multiline placeholder="xxxxxxxxx xxxx xxxx xxxx">任何提示将不胜感激。
2 回答
陪伴而非守候
TA贡献1757条经验 获得超8个赞
开始阅读// 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'>
<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>
梦里花落0921
TA贡献1772条经验 获得超5个赞
您可以使用以下方法动态调整文本区域的大小：
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>
添加回答
举报
0/150
提交
取消