Question

In Javascript/JQuery I have a need to copy one elements CSS style object to another object.

I have found a function that copies the CSS to another object but when I copy the style from a p element to a textarea I cannot then move the carat using keyboard up/down/left/right & it does not register/trigger the focus event when clicked. Function here: http://upshots.org/javascript/jquery-copy-style-copycss

The function appears to copy EVERY possible css attribute instead of only the ones that are set/defined, ie, if -moz-transform was never defined/set for the p element, it will still copy that attribute over but have it to auto(-moz-transform: auto). So I think this is why when I copy the CSS the textarea doesn’t react to focus events & keyboard events.

Is there a way to iterate over the style object in JQuery & the copy the defined CSS attributes to the new objects style object?

var styleToCpy = $(oldEle.style);
// maybe I need to do this instead: var styleToCpy = $(oldEle.css());

styleToCpy.each(function(attribName, value)
{
     newEle.css(attribName, value);
});

This is the problem that occurs with using the function here: http://upshots.org/javascript/jquery-copy-style-copycss

var newEle = document.createElement("textarea");
newEle.copyCSS(oldPElement);

// Now textarea has all these unnecessary CSS 
// attribs AND they make the textarea NOT react 
// to keydown & focus events!
element.style {
-moz-animation: 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s normal none 1 none;
-moz-animation-play-state: running;
-moz-appearance: none;
-moz-background-inline-policy: continuous;
-moz-binding: none;
-moz-box-align: stretch;
-moz-box-direction: normal;
-moz-box-flex: 0;
-moz-box-ordinal-group: 1;
-moz-box-orient: horizontal;
-moz-box-pack: start;
-moz-box-sizing: content-box;
-moz-column-gap: 12.8px;
-moz-column-rule: 0 none #666666;
-moz-columns: auto auto;
-moz-float-edge: content-box;
-moz-force-broken-image-icon: 0;
-moz-hyphens: manual;
-moz-image-region: auto;
-moz-orient: horizontal;
-moz-outline-radius: 0 0 0 0;
-moz-stack-sizing: stretch-to-fit;
-moz-tab-size: 8;
-moz-text-blink: none;
-moz-text-decoration-color: #666666;
-moz-text-decoration-line: none;
-moz-text-decoration-style: solid;
-moz-transform: none;
-moz-transform-origin: 50% 50%;
-moz-transition: all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;
-moz-user-focus: none;
-moz-user-input: auto;
-moz-user-modify: read-only;
-moz-user-select: auto;
-moz-window-shadow: default;
background: none repeat scroll 0 0 #FFFFFF;
border: 2px solid #7DFF00;
border-collapse: separate;
border-radius: 0 0 0 0;
border-spacing: 0;
bottom: auto;
box-shadow: none;
caption-side: top;
clear: none;
clip: auto;
clip-path: none;
clip-rule: nonzero;
color: #666666;
color-interpolation: srgb;
color-interpolation-filters: linearrgb;
content: none;
counter-increment: none;
counter-reset: none;
cursor: auto;
direction: ltr;
display: block;
dominant-baseline: auto;
empty-cells: show;
fill: #000000;
fill-opacity: 1;
fill-rule: nonzero;
filter: none;
float: none;
flood-color: #000000;
flood-opacity: 1;
font: 400 12.8px/16px "Arial","Helvetica",serif;
height: 192px;
image-rendering: auto;
ime-mode: auto;
left: 301.5px;
letter-spacing: normal;
lighting-color: #FFFFFF;
list-style: disc outside none;
margin: 0;
marker: none;
marker-offset: auto;
mask: none;
max-height: none;
max-width: none;
min-height: 0;
min-width: 0;
opacity: 1;
outline: 0 none #000000;
outline-offset: 0;
overflow: visible;
padding: 0;
page-break-after: auto;
page-break-before: auto;
pointer-events: auto;
position: absolute;
quotes: "“" "”" "‘" "’";
resize: none;
right: auto;
shape-rendering: auto;
stop-color: #000000;
stop-opacity: 1;
stroke: none;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-opacity: 1;
stroke-width: 1px;
table-layout: auto;
text-align: left;
text-anchor: start;
text-indent: 0;
text-overflow: clip;
text-rendering: auto;
text-shadow: none;
text-transform: none;
top: 645px;
unicode-bidi: embed;
vertical-align: baseline;
visibility: visible;
white-space: normal;
width: 230px;
word-spacing: 0;
word-wrap: normal;
z-index: 10000;

Answer 1

Just use html5’s contenteditable if old browser support isn’t necessary.

http://jsfiddle.net/rDJMv/1

<div contenteditable>hello world</div>

Or with jQuery

$('.updatable').attr('contenteditable', '');