I wanted to add a behavior for input with placeholder to a contenteditable field.
Not a problem and it is done with the following CSS
<div contentEditable="true" data-placeholder="Title"></div>
[contentEditable=true]:empty:not(:focus):before{
content:attr(data-placeholder);
color:grey;
}
which is for every element with an attribute contenteditable that is true and also does not have children and not focused insert a text that is equal to the text in data-placholder.
JsFiddle is available. On FF, Chrome and IE 11 it works nice, but in Safari (from 5 to 7) I see the following bug. When I click:
click on editable
write something
click away (it works properly)
then go back to contenteditable
remove all the text
click away
Than my contenteditable is empty. (In all other browser it has Title inside). Note that if you just click on editable and clickaway, it behaves correctly.
No idea why it behaves this way and also how to fix it.
This is a known issue where the element does not register as being empty. You can fix it with a simple jquery function call to empty the element:
$input.empty();
See this answer for a detailed explaination.
Here your working jsfiddle.
Related
I'm wanting a pointer cursor over an element until that element has focus, and then turn to the typical text caret. Easy enough in Chrome, but IE11 and Edge don't seem to let me change the cursor if the element has the contenteditable attribute.
#thing{cursor:pointer;}
<div id="thing" contenteditable="true"style="width:200px;border:1px solid black;cursor:pointer;"> this is a some random foo bar dog jumps over a stick test</div>
The simple example shows the cursor only changing if contentedible is false. If true, it only does the text cursor. Rather annoying since MS is the one who supposedly created this attribute. Is this just a bug? Intended by design? Is there a workaround?
I came across this link but unfortunately I'm still not having any luck by changing the DTD.
How to change cursor style on element with 'contenteditable' attribute in IE?
I have reproduced the problem on my side, it could be the default behavior of the IE browser, I will feedback this issue.
As a workaround, I suggest you could try to use the <textarea> tag, by using this tag, in IE browser it could use the pointer cursor, code as below:
<textarea id="thing" contenteditable="true" style="width:200px; height:100px; border :1px solid black; cursor:pointer">
this is a some random foo bar jumps over a stick test
</textarea>
I put a checkbox in a form's th element and it displays as a text input Firefox (currently version 25), although it renders correctly as a checkbox in all other browsers (even IE8!).
I looked at the inspector, the type attribute on the element is being immediately preceded by which is causing it to render as a text input instead of a checkbox.
I opened the View Source, there's nothing out of the ordinary - the whitespaces are normal whitespaces, not non-breaking whitespaces.
The issue ended up being with the combination of Firefox and using jqWidont.
I've got jqWidont applied to all table headers, and on Firefox it's inserting non-breaking spaces inside the child elements (only sometimes, I'm not sure what elements/attributes are affected).
Here's a jsFiddle showing the behaviour (view in Firefox): http://jsfiddle.net/4ZZnW/
Html:
<p>Checkbox: <input type="checkbox"/></p> <p class="widont">Checkbox: <input type="checkbox"/></p>
Script:
$(".widont").widont();
My solution was to be more choosy about when to use jqWidont on my elements and not use it when there are child elements.
In IE 9 (I'm assuming other IEs as well): using window.showModalDialog causes IE to set focus to the first focusable element in a page. This code demonstrates the issue:
<a href='javascript:window.showModalDialog("http://stackoverflow.com/")'>This sets focus to the search box</a>
<br>
<a href='javascript:window.open("http://stackoverflow.com/")'>This doesn't</a>
Fiddle: http://jsfiddle.net/Vz4Yb/
This is pretty annoying because I have some pages that have an image inside an A tag as the first element, and it puts an ugly focus rectangle around the image when the page loads. No other browser seems to be doing this. Has anyone else noticed this before, and is there a way to tell IE to NOT do this?
In Firefox extra spacing is added around the text value (not just vertical space as would be the case from line-height, but horizontal as well).
Chrome, Opera (has a slightly different line-height issue), and even IE all render submit buttons without adding any extra space.
http://jsfiddle.net/jswartwood/aFCwj/
If you open firebug and hover over the <a> and <input> respectively, you can see that it is not padding, etc.
From the sound of the bug tracker it seems that Firefox puts a "block" inside these form elements?!?! If this is true, why? This makes visual button size very difficult to keep consistent.
After digging through the Firefox source code (layout/style/forms.css) I found ::-moz-focus-inner to be the shadow selector I needed.
I still disagree with mozilla's choice of forcing line-height, but that is another story; in the mean time I may be able to normalize all browsers by setting line-height: normal.
input::-moz-focus-inner {
padding: 0;
border: 0;
}
A working example: http://jsfiddle.net/jswartwood/aFCwj/14/
To answer your original question: I do not believe CSS can successfully style the input submit element perfectly consistent across all browsers.
Every browser renders these elements differently. Explorer's buttons are in keeping with Windows. Safari's buttons are in keeping with Mac styling. Firefox, Chrome, Opera, etc. are going to do their own thing.
When it's important enough for your design that the submit button look the same across all browsers, you would create a custom graphic and make that your button.
Simply replace your submit button code with the following...
<input type="image" src="myButtonImage.jpg" alt="" />
You can optionally use CSS Sprites or JavaScript to swap button images on hover, click, etc.
A button doesn't have to be a button. You can use any other element, like a in your example, or even better span. And bind it click event to submit your form.
Does anyone know how to fix (or what causes) the page up/down bug in FF when contentEditable is present on a div?
See an example
Navigate to contentEditable article with FireFox (3 or 3.5) and use the Page Up/down arrows on your keyboard. You should be unable to scroll to the bottom of the page, and it should appear to flicker and jump back up.
I think it's a bug of Firefox which even exists in the newest version, 3.6.8.
For the sample page there are 2 ways to make the page up/down buttons work:
Change all the three DOM node's contenteditable="true" to false.
Find the id="main-content" node, and delete the style float: left;.
Seems the problem for Firefox is contenteditable="true" conflict with the style float:left;.
The only way i can see is to use an iframe... like TinyMCE and CKEditor WYSIWYG editors, they both use iframes. However content loaded in an iframe does not posses the styling rules of its parent. Therefor has to be adapted ... the reason to herald the contentEditable div in the first place.
Since no one answered i'm going to sulk and play with matches