Skip to content

Instantly share code, notes, and snippets.

@cognominal

cognominal/test.html

Created August 15, 2011 00:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cognominal/1145514 to your computer and use it in GitHub Desktop.
Save cognominal/1145514 to your computer and use it in GitHub Desktop.
Download ZIP
problem with visual feeback on editable elements
Raw
test.html
<!DOCTYPE html>
<!--
I want to edit an editable element if I click on it.
Elements of class "editing" are editable as per the css.
Clicking an element of class code makes it editable.
Typing escape makes the englobing element editable.
Everything works fine except that the blue box indicating
the editable area does not appear until I move the caret with
a left or right arrow
This is on chrome.
Note the reliance
Help.
-->
<html> <head>
<title></title>
<style type="text/css">
.editing {
-webkit-user-select: text;
-webkit-user-modify: read-write;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js""></script>
</head>
<body>
uneditable text
<span class="code" id="1">
<span class="code" id="2">aaa</span>
<span class="code" id="3">
<span class="code" id="4">bbb</span>
<span class="code" id="5">ccc</span>
<span class="code" id="7">ddd</span>
<span class="code" id="8">eee</span>
</span>
</span>
</span>
uneditable text
<script type="text/javascript">
$(".code").click(function(ev) {
ev.stopPropagation()
var id = ev.currentTarget.id;
$(".code").removeClass("editing");
$("#" +id).addClass("editing");
$("#" +id).focus();
})
$(".code").keydown(function(ev) {
ev.stopPropagation();
if (ev.keyCode === 27) {
t = ev.currentTarget;
dad = $(".editing")[0].parentNode;
$(dad).filter(".code").addClass("editing");
}
})
</script>
</body> </html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment