<divclass='wrapper'> |
<buttonclass='form-control' id='keygen'>Generate API Key</button> |
<inputclass='form-control' id='apikey' type='text' value=' placeholder='Click on the button to generate a new API key ...' /> |
</div> |
/** |
* Function to produce UUID. |
* See: http://stackoverflow.com/a/8809472 |
*/ |
functiongenerateUUID() |
{ |
vard=newDate().getTime(); |
if(window.performance&&typeofwindow.performance.now'function') |
{ |
d+=performance.now(); |
} |
varuuid='xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,function(c) |
{ |
varr=(d+Math.random()*16)%16 | 0; |
d=Math.floor(d/16); |
return(c'x' ? r : (r&0x3|0x8)).toString(16); |
}); |
returnuuid; |
} |
/** |
* Generate new key and insert into input value |
*/ |
$('#keygen').on('click',function() |
{ |
$('#apikey').val(generateUUID()); |
}); |
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> |
body { |
text-align: center; |
background: #f1f1f1; |
} |
.wrapper { |
padding-top:60px; |
} |
button.form-control { |
background: #f7f7f7 none repeat scroll 00; |
border-color: #ccc; |
box-shadow: 01px0#ccc; |
color: #555; |
vertical-align: top; |
border-radius: 3px; |
border-style: solid; |
border-width: 1px; |
box-sizing: border-box; |
cursor: pointer; |
display: inline-block; |
font-size: 13px; |
height: 28px; |
line-height: 26px; |
margin: 0; |
padding: 010px1px; |
text-decoration: none; |
white-space: nowrap; |
} |
input.form-control { |
background-color: #fff; |
border: 1px solid #ddd; |
box-shadow: 01px2pxrgba(0,0,0,0.07) inset; |
color: #32373c; |
outline: 0 none; |
transition: border-color 50ms ease-in-out 0s; |
margin: 1px; |
padding: 3px5px; |
border-radius: 0; |
font-size: 14px; |
font-family: inherit; |
font-weight: inherit; |
box-sizing: border-box; |
color: #444; |
font-family: 'Open Sans',sans-serif; |
line-height: 1.4em; |
width: 310px; |
} |