Friday, 30 October 2015
CLIP BOARD EXAMPLES CODE
-----------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE IN POST HTML SECTION
-----------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------
EXP:7
-----------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
#typing{background-color:;}
#display{background-color:#FFEFC6;}
#typing_input{
width:200px;
resize:none;
overflow:hidden;
font-size:18px;
height:100px;
padding:2px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
</head>
<body>
<h1>TYPE ANY WODRD IN THIS BOX </h1>
<div id="typing">
<input type="text" name="typing" value="" id="typing_input" style="width:300px;">
</input>
</div>
<div id="display">
<p id="typing_display"></p>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function()
{
$('#typing_input').bind("keypress keydown", function(event) {
$('#typing_display').text($('#typing_input').attr("value"));
});
});
</script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
EXP:8
-----------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />
<script type="text/javascript">
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
</script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
EXP:9
-----------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
#typing{background-color:;}
#display{background-color:#FFEFC6;}
#typing_input{
width:200px;
resize:none;
overflow:hidden;
font-size:18px;
height:100px;
padding:2px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
</head>
<body>
<h1>TYPE ANY WODRD IN THIS BOX </h1>
<div id="typing">
<input type="text" name="typing" value="" id="typing_input" style="width:300px;">
</input>
</div>
<div id="display">
<p id="typing_display"></p>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function()
{
$('#typing_input').bind("keypress keydown", function(event) {
$('#typing_display').text($('#typing_input').attr("value"));
});
});
</script>
</body>
</html>
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment