ランダム文字列生成

パスワードや管理者ページのURLを決めるときなど、
勝手にランダムな英数字を作ってくれたら便利じゃない？

ってことで、考えてみました。

参考サイト
http://www.hanano-ya.jp/javascript/1347

ですが、使う機能は決めているので、めっちゃ変えてます。

こんな感じのもの作りました。

【機能】

ランダム作成ボタンを押したらランダムな大小英数字８桁の数値を作成する。

フォームではなくテキストとして表示する。

フォームに入力ボタンを押したらタイプパスワードのフォームに入力される。(上のテキストと同じもの。タイプをテキストにすると確認できる。何回クリックしても同じものが表示される。)

選び直すボタンを押したら、すべてクリアされる。(選び直すボタン押下後、フォームに記入ボタンを押してもクリアされる前のランダム数値が入力されない。)

ランダム作成ボタンを押してもその度にランダム数値が切り替わる。

【変更可能】

１クリックで２カ所同時に表記するかどうか。

大文字英字・小文字英字・数字を選べるようにしてあるが、組み合わせは変えられる。

【追加するかどうか】

パスワードになっているフォームは書き換えが可能なので、変更できないようにするかどうか。

その度に条件を変えたいなぁ～って方は、上の参考サイトを見るといいと思います♪

ざざっと！！
機能だけです。ビジュアルはみなさんでかっこ良くしてくださいb

<!DOCTYPE html>

<head>

<title>ランダム文字列生成</title>

$(document).ready(function(){

var randomString;

var baseString ='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';

$('.make').click(function(){

randomString = "";

for(var i=0; i<8; i++) {

randomString += baseString.charAt( Math.floor( Math.random() * 62));

}

$('.res').text(randomString);

$('.input').click(function(){

$('.form').val(randomString);

});

$('.reset').click(function(){

$('.res').text("");

$('.form').val("");

randomString = "";

});

</script>

</head>

<body>

<style>

.res, .form{

width: 120px;

height: 24px;

border: solid 2px;

text-align: center;

}

</style>

<button class="make">ランダム作成</button><button class="reset">選び直す</button>

<button class="input">フォームに入力</button>

<br />

</body>

</html>

久しぶりにコーディングした。
え？・・・ってこと起きるけど、やっぱり楽しい♪
思ったよりすぐできて、なんかすっきりです。
だって、これ考えたままGW過ごしたくなかったから！！笑