We Keep Coding

I am looking for more options / information for the HTML attribute: "contenteditable = 'true'" and the javascript: "focus()" function

I would like to learn more about the "HTML contenteditable =' true '" attribute and the javascript focus () function.
For example, I would like to know how I can influence the position of the focused line or how to edit the background of a focused line.
I have already googled some things but I can't find the right information.
Does anyone have a good tip?

You can check which element is on focus by writing in the Google Chrome console:
document.activeElement
The contenteditable attribute specifies whether the content of an element is editable or not.
If you want to trigger the focus on a contenteditable element you can do it by:
$(".contenteditableClassName").focus();
Any other background change on this element is done by CSS for example you can use
.no-touchevents &:hover, &:focus, &:active {
border-color: white;
color: blue;
You can apply different changes on the element on focus this way.
Also you can remove the focus border on click by using:
.pointer-focus &:focus {
outline: none;
}

How to keep the background color persistent in css active?

I have a image, when user clicks on it I am changing the background color of it. for ex:
HTML:
<img src="images/image1.png" />
CSS:
img:active{
background-color:red;
}
But the red color is not persistent. and the red color is replaced with the old color. How can I make it persistent ?

OnClick functionality isn't achievable solely through CSS. You will need to use javascript to achieve this.

Just use jQuery:
$('img').click(function(){
$(this).addClass('red');
});
then in css make sure you have something like this:
img.red {
background-color:red;
}

As others pointed out, you should use javascript with onclick event handler, save the clicked element's state and toggle at right time... However I would like to introduce this work-around without using any script, it uses some focusable wrapper (like a button) to mimic other unfocusable element (like the image) and use the :focus pseudo-class to style the active element (as you understand, it can be in such a state by clicking or tabbing):
HTML:
<button class="wrapper">
<img/>
</button>
CSS:
.wrapper > img {
background-color:inherit;
width:200px;
height:200px;
}
.wrapper {
border:none;
padding:0;
cursor:default;
}
.wrapper:focus {
background-color:red;
outline:none;
}
Here is the working fiddle, try clicking the image and then clicking on some point outside to see it in action.

Easiest way to make disabled button look disabled with jQuery

When I use .prop('disabled',true) to disable a button, it works, but the button does not look disabled. I remember in the old days when I used .attr('disabled','disabled') to disable buttons, they would become more visibly disabled, i.e. the text would be greyed out or something so the user wouldn't try to click. Now I think the button border fades a bit but the text is not.
What's the easiest way to get the old behavior back? I am lazy and don't want to write one line of code to disable the button and another to make it look disabled - I want to get both effects in a single command if possible. Should I use a different element other than a button? A different method of disabling?
I made a fiddle here: http://jsfiddle.net/ak2MG/. Here's the code.
HTML:
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
Javascript:
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true); } );

Or change the opacity of the button
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).css('opacity',0.5);
});
Fiddle

I would add a disabled class to the button.
This lets you control the styling from CSS instead of javascript so all of your styling is in one place (where it should be).
Demo: JSFiddle
HTML
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
JS
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).addClass('disabled');
});
CSS
.disabled {
color: #999;
}

it is pretty simple, just change the text style
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
my_button_disable(this);
});
function my_button_disable(btn) {
$(btn).prop('disabled',true);
$(btn).css('color', 'lightgray');
// put whatever else you want here
}
http://jsfiddle.net/ak2MG/6/

Simplest - Add a state in CSS
Target it with CSS to change the style,
importantly the pointer-events: none will make it unresponsive. :
button:disabled {
background: #F5F5F5;
color : #C3C3C3;
cursor:none;
pointer-events: none;
}

The change from attr() to prop() was only to the jQuery API and has nothing to do with any difference you are observing in the style of a disabled button.
A disabled button's style is decided by the browser. The fiddle you provided looks very "disabled" in Google Chrome (Version 33.0.1750.154 m). If you'd like to alter the style of a disabled button to your liking, I recommend adding a class OR styling based on attribute
button[disabled],
button.disabled {
color: #999;
background: #DDD;
border: 1px solid #CCC;
}

Disable html input element by applying custom css class

I want to disable my all input element of a div by applying my custom css class.
but i could not find any css attribute which can disable an input element.
currently what am i doing
$('#div_sercvice_detail :input').attr('disabled', true);
$('#retention_interval_div :input').addClass("disabled");
which can disable all input element of div with css attr but i want to apply my custom class for disable all input with some extra css attributes
$('#retention_interval_div :input').addClass("disabled");
class
.disabled{
color : darkGray;
font-style: italic;
/*property for disable input element like*/
/*disabled:true; */
}
any suggestion for doing this with jquery without using .attr('disabled', true);?

There is no way to disable an element with just CSS, but you can create a style that will be applied to disabled elements:
<style>
#retention_interval_div​​ input[type="text"]:disabled {
color : darkGray;
font-style: italic;
}​
</style>
Then in your code you just have to say:
$('#retention_interval_div :input').prop("disabled", true);
Demo: http://jsfiddle.net/nnnnnn/DhgMq/
(Of course, the :disabled CSS selector isn't supported in old browsers.)
Note that if you're using jQuery version >= 1.6 you should use .prop() instead of .attr() to change the disabled state.
The code you showed is not disabling the same elements that it applies the class to - the selectors are different. If that's just a typo then you can simplify it to one line:
$('#retention_interval_div :input').addClass("disabled").attr('disabled', true);

You can use following css to practically disable the input:
pointer-events: none;

Using normal CSS
.disabled{
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}

No. CSS can't disable an input element. CSS is for styling only, it can't do anything else. Also, input will only work with input, don't forget select, textarea, password

You need to do 2 things, so why not wrap them in a single function? You could even create a little plugin to do this:
(function ($) {
$.fn.disableInput = function () {
return this.each(function(){
$(this).prop('disabled');
$(this).addClass('disabled', true);
});
}
})(jQuery);
Then you can call it like this:
$('#myInput').disableInput();
...and even chain it with other stuff, like this:
$('#myInput').disableInput().addClass('otherClass');​

You can't disable input elements using css properties. But you can improve your current coding like following
$('#div_sercvice_detail :input').prop('disabled',true).addClass("disabled");

CSS for disabled form input

I have this in my CSS file that styles input fields in a form:
input,textarea,input,select,input,checkbox {
font-size:12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
color:#98925C;
background-color:#000;
border:1px solid #413E22;
}
When I use a disabled on the form though (eg the submit button when pressed), it doesn't grey out like it should.
I have this in the submit button HTML
onclick="this.disabled=true;this.value=' done ';this.form.submit();"
How can i make it so the button greys out once clicked?

It does gray out in IE. For other browsers, though, you need to specifically define your "disabled element" styles with:
:disabled {
color: #6b849a;
text-shadow: 1px 1px #ffffff;
cursor: default;
}
Something like that (although you may have to apply !important if there are cascading issues).

The issue is that your styles are overriding the browser defaults for a disabled form element.
You need to redefine the styles by specifying :disabled pseudoclass in your CSS.
Here's a jsFiddle that shows how it works.

input[disabled]{
styles here
}

Use the :disabled pseudoclass. This might not work in older browsers and will surely not work in IE, so you could also add a normal class to the form when disabling it.