@reactual/handsontable
Version:
Spreadsheet-like data grid editor
226 lines (186 loc) • 7.35 kB
HTML
<html>
<head>
<meta charset='utf-8'>
<title>Password cell type - Handsontable</title>
<!--
Loading Handsontable (full distribution that includes all dependencies)
-->
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/handsontable.css">
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/pikaday/pikaday.css">
<script data-jsfiddle="common" src="../dist/pikaday/pikaday.js"></script>
<script data-jsfiddle="common" src="../dist/moment/moment.js"></script>
<script data-jsfiddle="common" src="../dist/numbro/numbro.js"></script>
<script data-jsfiddle="common" src="../dist/numbro/languages.js"></script>
<script data-jsfiddle="common" src="../dist/handsontable.js"></script>
<!--
Loading demo dependencies. They are used here only to enhance the examples on this page
-->
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="css/samples.css?20140331">
<script src="js/samples.js"></script>
<script src="js/highlight/highlight.pack.js"></script>
<link rel="stylesheet" media="screen" href="js/highlight/styles/github.css">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
<!--
Facebook open graph. Don't copy this to your project :)
-->
<meta property="og:title" content="Password cell type">
<meta property="og:description"
content="This kind of cell behaves like a text cell with a difference that it masks it's value using asterisk in cell renderer">
<meta property="og:url" content="http://handsontable.com/demo/password.html">
<meta property="og:image" content="http://handsontable.com/demo/image/og-image.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="409">
<meta property="og:image:height" content="164">
<link rel="canonical" href="http://handsontable.com/demo/password.html">
<!--
Google Analytics for GitHub Page. Don't copy this to your project :)
-->
<script src="js/ga.js"></script>
<script data-jsfiddle="common">
function getCarData() {
return [
{id: 1, name: {first: "Ted", last: "Right"}, password: "plainTextPassword"},
{id: 2, name: {first: "Frank", last: "Honest"}, password: "txt"},
{id: 3, name: {first: "Joan", last: "Well"}, password: "longer"}
];
}
</script>
</head>
<body>
<div class="wrapper">
<div class="wrapper-row">
<div id="global-menu-clone">
<h1><a href="../index.html">Handsontable</a></h1>
</div>
<div id="container">
<div class="columnLayout">
<div class="rowLayout">
<div class="descLayout">
<div class="pad" data-jsfiddle="example1">
<h2>Password cell type</h2>
<p>This kind of cell behaves like a text cell with a difference that it masks it's value using asterisk in cell renderer.</p>
<p>For the cell editor, a <code><input type="password"></code> field is used.</p>
<p>Data is stored in the data source as plain text.</p>
<div id="example1"></div>
<p>
<button name="dump" data-dump="#example1"data-instance="hot1" title="Prints current data source to Firebug/Chrome Dev Tools">
Dump
data to console
</button>
</p>
</div>
</div>
<div class="codeLayout">
<div class="pad">
<div class="jsFiddle">
<button class="jsFiddleLink" data-runfiddle="example1">Edit in jsFiddle</button>
</div>
<script data-jsfiddle="example1">
var example1 = document.getElementById('example1'),
hot1;
hot1 = new Handsontable(example1, {
data: getCarData(),
colHeaders: ['ID', 'First name', 'Last name', 'Password'],
columns: [
{data: 'id'},
{data: 'name.first'},
{data: 'name.last'},
{data: 'password', type: 'password'}
]
});
</script>
</div>
</div>
</div>
<div class="rowLayout">
<div class="descLayout">
<div class="pad" data-jsfiddle="example2">
<h2>Fixed hash length</h2>
<p>By default every hash has length equal to the length of value that it corresponds with. Use option <code>hashLength</code> to set fixed hash length.
<div id="example2"></div>
<p>
<button name="dump" data-dump="#example2" data-instance="hot2" title="Prints current data source to Firebug/Chrome Dev Tools">
Dump
data to console
</button>
</p>
</div>
</div>
<div class="codeLayout">
<div class="pad">
<div class="jsFiddle">
<button class="jsFiddleLink" data-runfiddle="example2">Edit in jsFiddle</button>
</div>
<script data-jsfiddle="example2">
var example2 = document.getElementById('example2'),
hot2;
hot2 = new Handsontable(example2, {
data: getCarData(),
colHeaders: ['ID', 'First name', 'Last name', 'Password'],
columns: [
{data: 'id'},
{data: 'name.first'},
{data: 'name.last'},
{
data: 'password',
type: 'password',
hashLength: 10
}
]
});
</script>
</div>
</div>
</div>
<div class="rowLayout">
<div class="descLayout">
<div class="pad" data-jsfiddle="example3">
<h2>Custom hash symbol</h2>
<p>By default every hash consists of asterisks <code>*</code>. Use option <code>hashSymbol</code> to set
custom hash symbol. You can use any character, entity or event HTML.
<p><strong>Note:</strong> You cannot change symbol used by the input field due to browsers limitations.</p>
<div id="example3"></div>
<p>
<button name="dump" data-dump="#example3" data-instance="hot3" title="Prints current data source to Firebug/Chrome Dev Tools">
Dump
data to console
</button>
</p>
</div>
</div>
<div class="codeLayout">
<div class="pad">
<div class="jsFiddle">
<button class="jsFiddleLink" data-runfiddle="example3">Edit in jsFiddle</button>
</div>
<script data-jsfiddle="example3">
var example3 = document.getElementById('example3'),
hot3;
hot3 = new Handsontable(example3, {
data: getCarData(),
colHeaders: ['ID', 'First name', 'Last name', 'Password'],
columns: [
{data: 'id'},
{data: 'name.first'},
{data: 'name.last'},
{
data: 'password',
type: 'password',
hashSymbol: '■'
}
]
});
</script>
</div>
</div>
</div>
<div class="footer-text">
</div>
</div>
</div>
</div>
</div>
<div id="outside-links-wrapper"></div>
</body>
</html>