在完成随机字符串生成器后，实现一个密码生成器似乎是件没有难度的事情，但我还是想得太简单了。

首先是获得url中的参数，可以参考获取URL中的查询参数。实际上，并不需要这么复杂的处理。这里只需要取得url中?之后的查询部分，简单粗暴用url = location.search.substr(1)就可以了。考虑到url中也可能没有查询部分，所以还得有判断和默认的逻辑。

然后是将生成的密码写到网页中去，这个用JS操作DOM并没有难度。考虑到可能有临时编辑的需要，宜用input或textarea标签。

再就是复制的功能，可以直接调用比较完善clipboard.js。文档介绍了两种方式，其他元素中用data-clipboard-target，自身属性用data-clipboard-text。文案写得清晰易懂，实现点击复制并不难。但我花了很多时间去思考实现自动复制。一个密码生成之后，除非需要编辑修改，否则当然就是复制。省事的做法是，密码生成后就自动复制到剪切板中去。所以要实现一个生成复制的函数。

起初，我用的是data-clipboard-target，无论是onLoad还是onClick都无法实现自动复制，也没有相关参考。直到在文档中看到动态设置文本用到getAttribute，我才反想到setAttribute。换用data-clipboard-text终于实现了我需要的功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
html

<!DOCTYPE html><html><head><meta charset="utf-8" />
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<title>PSWD</title>
</head><body >

<input type="text" id="target" />
<button type="button" id="genCopy_" onclick='genCopy(this)' >genCopy</button>
<button type="button"  id="gen_" onclick='gen()'>gen</button>
<button type="button" id="copy_" onclick='copy(this)'>copy</button>
<button type="button" id="save_" onclick='save(this)'>save</button>
<br />
<textarea id="target2" cols="30" rows="30">
</textarea>
</body></html>
<script type="text/javascript" src="randstr.js"></script>
<script type="text/javascript" src="pswd.js"></script>
<script type="text/javascript" src="clipboard.min.js"></script>

js

/**
	pswd.js
	Ande.Studio
	v3 20190826
 **/
target = document.getElementById("target");
target2 = document.getElementById("target2");

function gen(args='nul8'){//密码生成
	if(url = location.search){
		args = url.substr(1);
		str = randstr(args);
	}else{
		str = randstr(args);
	}

	target.value = str;//将str写入目标元素赋值
	target2.value = str + '\n' + target2.value;//将str追加写入目标文本域
	console.log(str);
	return str;
}

function copy(obj){//复制 
	var clipboard = new ClipboardJS("#"+obj.id);
	document.getElementById(obj.id).setAttribute("data-clipboard-target","#target");//data-clipboard-target，复制可见
}

function genCopy(obj){//生成加复制 
	gen();
	copy(obj);
	//document.getElementById(obj.id).setAttribute("data-clipboard-text",gen());//data-clipboard-text，复制过程不可见。假设在这条代码之前执行gen();copy(obj);会gen()2次，但只会copy最后一次gen()
	//data-clipboard-target和data-clipboard-text同时存在的话，text将优先target会失效。
	
}

function save(){//保存

}
window.onload = function(){//载入调用
	str = gen();
	target2.value = '';//清空gen()设置的target2值，以显示占位符
	ph = str + `\n\n\n pswd.html?nul8
默认参数nul8，生成8位随机字符串，包含大小写字母数字
s:special character特殊字符
n:number 数字
u:upper case大写字母
l:lower case小写字母
数字用作控制生成随机字符的长度`//占位符
	//target2.setAttribute("placeholder",ph);
	target2.placeholder=ph;

/**
	var obj = new Object();
	obj['id']= 'genCopy_'
	genCopy(obj);
	手工构造一个obj,指定obj['id']='genCopy_'或者obj.id='genCopy_',以期在载入时调用genCopy(obj),实际上确实调用了且生成了密码且没有报错，但却不会实现复制。
	这是值得注意的问题，具体的机制有待研究。
**/
}

Todo

js save()

电脑桌面端示例

手机移动端示例

相关代码已放在github。