I have a div:
<div id="test" style="width:auto; height:auto;">
</div>
And a function:
$(function() {
$("#test").attr("contentEditable", "true");
$("#test")
.attr("tabindex", "0")
.keydown(function(){ alert(1); return false; })
.mousemove(function(){ alert(2); return false; });
});
How can I implement this code in JavaScript without including the JQuery library?
You can do it like this in javascript without using jquery, Demo available here JsFiddle You can put it in onload method of body then it will call onload of body or just put it in script section below all controls without putting it in function then it will call when document is ready like jquery method $().ready();
var test = document.getElementById('test');
test.setAttribute("contentEditable", "true");
test.setAttribute("tabindex", "0");
test.onkeydown = function(event) { alert("KeyDown");}
test.onmousemove = function(event) { alert("MouseMove");}
.getElementById(), unless you really like typing.function runme() {
var elm = document.getElementById("test");
elm.contentEditable = "true";
elm.tabIndex = 0;
elm.onkeydown = function() { alert(1); return false; };
elm.onmousemove = function() { alert(2); return false; };
}
if(window.addEventListener)
window.addEventListener("load", runme, false);
else
window.attachEvent("onload", runme);
Adil has the right idea, but to improve upon it a bit, you could store the element in a variable so you do not have to make a call to get the element every time. So I would change it to look something like this:
var t = document.getElementById('test');
t.setAttribute("contentEditable", "true");
t.setAttribute("tabindex", "0");
t.onkeydown = function(event) { alert("KeyDown");}
t.onmousemove = function(event) { alert("MouseMove");}
Upvoted Adil for beating me to it and for providing the jsfiddle link :)
updated: nevermind, since you just updated your post
