CODEWITHSUNDEEP
javascriptjqueryformsgoogle-docs
Sanjeev Satheesh
Sanjeev Satheesh

Reputation: 424

I want editables but without forms or Inputs

I want my users to be able to edit text on their page (not all) without showing them a form. At the same time, I do not want it to be to an editable, because there are too many of them and is not usable. The best would be something like google docs, where the user can read his text and seamlessly update it, without any hassle.

Does anyone know of a jquery plugin that can do this? If you think I should just use one of the rich text editors at each location, please tell me so.

On the same note, I have seen a couple of sites which allow users to edit content in divs without changing the element. Can anyone tell me how its done?

Upvotes: 2

Views: 218

Answers (5)

Sanjeev Satheesh
Sanjeev Satheesh

Reputation: 424

As a new answer, I found this plugin that does everything I wanted. I have to write even less code :) http://valums.com/edit-in-place/

Upvotes: 0

Robert Gowland
Robert Gowland

Reputation: 7947

The sites I've seen that let you edit the contents of a div do so by adding a click event to the div which removes the contents of the div and adds an editable and a button to the div.

When the user clicks the new button, the editable and button are hidden and whatever is in the editable is used as the new content of the div. Often, there is an AJAX call to take some action on the back-end as well.

Also, the button may be replaced with an event handler on the editable which takes action on Enter or Esc.

Note that content-editable is HTML5, so it won't work in all browsers, yet.

EDIT

It turns out content-editable is pretty well supported (http://blog.whatwg.org/the-road-to-html-5-contenteditable), but still may not be what you want.

Upvotes: 3

Val
Val

Reputation: 17522

1 http://html5demos.com/contenteditable Content editable is an html 5 which means not alot of browsers support it.

2 This option is a bit more visual effects than anything else.

<textarea style="border: none;">Blabla</textarea>



 $('textarea').keyup(function (){           
         // here u can do ur cool stuff to autosave when a user rests for 2 secondes or more 

    });

Upvotes: 0

Mark Coleman
Mark Coleman

Reputation: 40863

I would take a look at jeditable which has a live demo.

Another option I could suggest if you don't like the idea of a form. Maybe you could just style the input, textarea's so they don' have the "form" look to them.

Upvotes: 1

Moses
Moses

Reputation: 9173

In order to make a DOM element editable, you can attach the attribute/value pair content-editable="true" to the tag. For example, 

<!-- all text within this <div> can be edited by the user -->
<div content-editable="true">
    Lorem ipsum doler sit amet
</div>

Upvotes: 3

Related Questions