<div class="title-area">
<h3><span class="editAttributeInput" id="Name" contenteditable="true" ><%= Name %></span></h3>
</div>
I want to edit this title by clicking it.
This works fine.
But also when I click to the right of this element, I trigger contenteditable. I do not want that.
I do not want to set a width on the element, because I want the editable field to only be as big as the word inside (no fixed size).
Setting a width on the .title-area does not help either.
Does anybody know how to do this?
I've tried your example and it worked. (clicks on other elements are not triggering contenteditable) the fiddle
Below is a solution with jquery. (can be helpful)
<div class="title-area">
<h3>
<span tabindex="999" class="editAttributeInput" id="Name">name</span>
</h3>
</div>
'tabindex="999"' is for focus and blur to work.
$('#Name').focus(function (e) {
$(this).attr('contenteditable', true);
});
$('#Name').blur(function (e) {
$(this).removeAttr('contenteditable');
});
Related
here is my div code and my file type is .php
these are div elements that I want to hide.
i use different methods with id and class also with javascript but my issue is not resolved
<div class="qamar-container">
<div class="content-section">
<h1>AB & MIB Traders</h1>
</div>
<div class="button-section">
<button>AB</button>
<button>ABC</button>
</div>
</div>
</div>```
if need any other information please tell me.
here are the steps by which my issue is resolved.
CSS Styles
display:none;
}
javascript
jQuery('#qamar-ab').on('click', function(event) {
jQuery('#ab').toggle('show');
jQuery('#qamar').toggle('hide');
});
});
to visualize my issue, I created the following html structure:
a father div
a children div
Both are with the same attributes: contenteditable="true" tabindex="0".
main.html:
<html>
<div>
<div contenteditable="true" tabindex="0">
firstDivText
<div contenteditable="true" tabindex="0">
secondDivText
</div>
</div>
</div>
</html>
Problem:
Navigating with tabs only (tabindex is 0 so its allowed), I can navigate to father and child with no problem.
When focus (given from tab) is on the father element, I can immediatly start typing to modify its context (contentEditable true).
But when focus is on the child element, I must click it before I can modify the text!
Question:
Why is this happening?
How can I fix it so that which element that is currently on focus will "receive" the key strokes?
Don't want to avoid using contentEditable nor to use jquery :S
You better use inputs and avoid content editable you can style it to look the same.
.myInput{
background:rgba(0,0,0,0);
border:none;
}
edit:
if you really must you can fire click event on focus
$(".Mycontenteditable").focus(function(){
$(this).click();
});
I was wondering how do I make it so that a div container show parts of its content in a small text box, and there will be an arrow at the bottom of the text box pointing downwards, and when clicked upon, it will make the text box bigger and show all of its content?
Can this be achieved using html/css, without the need to use javascript and jQuery or is it a jQuery thing?
<div class="society3" style="overflow:auto">
<p>Description:<p>
<p><?php echo $description; ?></p>
</div>
The description variable just contains a paragraph of text, so I would like the div container to show part of the text and when someone wants to read the full description, they can click on the button and, box will extend to show all content of the div tag.
The bad news is that you will need to use jQuery or similar for something like this, but the good news is that it's relatively straight forward. After you've loaded it into your page, all you need to do is target the id you would like to show/hide (or as it is called in jQuery toggle) and make an onClick() event.
For example, something like this should work.
<script>
$(document).ready(function(){
$("button").click(function(){
$("#toggle").toggle();
});
});
</script>
<div id="button" class="society3" style="overflow:auto">
<p>Description:<p>
<p id="toggle" style="display: none">[content]</p>
</div>
The most similar of your objective is using html5, but this works in google chrome, sometimes in firefox.
<html>
<head><meta charset="UTF-8"></head>
<style type="text/css">
.expand{
padding:10px;
}
</style>
<div class="expand">
<details>
<summary>OPEN</summary>
<p>Some text</p>
</details>
</div>
</html>
I got this html
<div contenteditable="true"> Hey <a class="tgt" contenteditable="false">harry</a> great </div>
When in firefox I am unable to remove the a.tgt using backspace. Gets removed in all other browser except firefox
Whats the problem?
This may be helpful for some. I ran into the same problem.
Instead of this:
<div contenteditable="true"> Hey <a class="tgt" contenteditable="false">harry</a> great </div>
You can have this:
<div contenteditable="true"> Hey <a class="tgt" contenteditable="false">harry</a><span class="remove"></span> great </div>
You can use javascript (using jquery in this case) to detect the deletion of .remove and remove your uneditable div at the same time:
// you can wrap this in an if statement and only execute in firefox
$('.remove').on("DOMNodeRemoved", function() {
$(this).prev(".tgt").remove();
});
Hope this helps!
try to wrap <a> html into span tag with attribute contenteditable=true
<div contenteditable="true"> Hey <a class="tgt" contenteditable="false"> <span contentEditable="true">harry</span></a> great</div>
In Chrome I have a simple contenteditable="true" span, and if the user clicks anywhere around it, the cursor shows up and he/she can start editing. This is annoying b/c I only want the cursor to show up when the user clicks on the span itself, not outside of it.
Example: http://jsbin.com/oyamab/edit#javascript,html,live
Html below...
<body>
<span id="hello" contenteditable="true">Hello World</span>
</body>
If you visit that link in Chrome, click anywhere in the rendered html box (the far right column in jsbin), and you can start editing. In Firefox on the other hand, you have to click on the actual span to edit it (yay!).
Do I need to just accept this as a Chrome thing, or is there a hack around it? Thanks.
I strongly suspect it's just a WebKit thing. You can work around it though by making the span contenteditable only when it's clicked
Demo: http://jsfiddle.net/timdown/nV4gp/
HTML:
<body>
<span id="hello">Hello World</span>
</body>
JS:
document.getElementById("hello").onclick = function(evt) {
if (!this.isContentEditable) {
this.contentEditable = "true";
this.focus();
}
};