JSFiddle - React, Tailwind, and code Playground

by mkoistinen

HTML

<p>Hold the shift-key down and click 'Add Button' for Slow Add.</p>

<form id="my-form" method="post">
    <input type=text value="">
    <a href="#" id="fake-button">Add button</a>
</form>

CSS

p {
    font-family: Arial, sans-serif;
    font-size: 12px;
    margin-bottom: 1em;
}
input {
    font-size: 12px;
    padding: 3px;
}
#fake-button {
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: 12px;
    padding: 3px 1em;
    color: #000;
    border: 2px outset #ccc;
    background-color: #ccc;
    text-decoration: none;
}

#fake-button:hover {
    color: #000;
}
#fake-button:active {
    border-style: inset;
}

JavaScript

// Enter on the form will only do a 'slow add'
// But by pressing shift while clicking the link,
// you can trigger the fast add.
var fastadd = function() {
    alert('Fast add...');
    return false;
}
var slowadd = function() {
    alert('Slow add...');
    return false;
}

$('#my-form').bind('submit', fastadd);
$('#fake-button').bind('click', function( evt ) {
    if ( evt.shiftKey ) { slowadd(); }
    else { fastadd(); }
});