Reputation: 1021
I am not sure what it is called, but I want to be able to click on e.g. a div
containing a number, and then it will change into a input text field, with the value being the number I clicked.
Then I want to edit the number, and click off (onblur
event), and it will change back to a div
, from the text field showing the new edited number. The number would have also been updated into the database via ajax.
What is this function called?
What is the best way to code this?
Upvotes: 16
Views: 53276
Reputation: 11394
contentEditable
HTML5 has a native contentEditable
attribute with pretty good browser support, so you may want to explore this if it aligns with your situation. Simply putting contentEditable="true"
onto a div will make it clickable and editable. More info here and here. Also, here's a plugin that takes it further and gives rich text, WYSIWYG tools and HTML support for contentEditable
elements.
To make practical use of the editable element, you'll need to use JS to trigger an action when input occurs. For the original poster, they would likely pass the input content to another function that sends it to an external database.
Sample code for contentEditable, no plugins, no jquery:
var myEditableElement = document.getElementById('myContent');
myEditableElement.addEventListener('input', function() {
console.log('--- input detected ---');
console.log(myEditableElement.innerHTML);
});
<div id="myContent" contentEditable="true">This is an editable element. Click and type something!</div>
Upvotes: 24
Reputation: 41
I know this is an old thread, but I built a project that does exactly this a while ago: https://github.com/JackChilds/Preview-In-Place.
You can then use it like this:
// get element:
var el = document.querySelector('#idOfElement')
// function to process the user's data, e.g. you could convert markdown to HTML here:
function processData(data) {
return data.toUpperCase() // do something with the data here
}
// initialise the class:
var example = new PreviewInPlace(el, {
// options
previewGenerator: processData // reference to the function that processes the data
})
<div id="idOfElement" class="block">
<textarea class="edit">Some Text Here</textarea>
<div class="preview"></div>
</div>
<script src="https://cdn.jsdelivr.net/gh/JackChilds/Preview-In-Place@main/dist/previewinplace.min.js"></script>
And of course you can add some CSS to make it look a bit neater:
// get element:
var el = document.querySelector('#idOfElement')
// function to process the user's data, e.g. you could convert markdown to HTML here:
function processData(data) {
return data.toUpperCase() // do something with the data here
}
// initialise the class:
var example = new PreviewInPlace(el, {
// options
previewGenerator: processData // reference to the function that processes the data
})
.block {
width: 200px;
}
.block .edit {
border: none;
outline: none;
border-radius: 0;
resize: none;
}
.block .edit, .block .preview {
padding: 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
/* Make the 'block' have a red background when in edit mode */
.block.state-edit .edit {
background-color: rgba(131, 0, 0, 0.3);
}
/* Make the 'block' have a green background when in preview mode */
.block.state-preview .preview {
background-color: rgba(9, 174, 0, 0.3);
}
<div id="idOfElement" class="block">
<textarea class="edit" rows="1">Some Text Here</textarea>
<div class="preview"></div>
</div>
<script src="https://cdn.jsdelivr.net/gh/JackChilds/Preview-In-Place@main/dist/previewinplace.min.js"></script>
Upvotes: 2
Reputation: 1741
You can do the following:
Have a click event and create a textbox on the fly which takes the text inside the div as a value.
The have a blur even which binds to that textbox and makes an AJAX call and in its success change the div text
Lets say your HTML is like:
<div id="fullname">Amazing Spider man</div>
And your JS code will be like:
$('#fullname').click(function(){
var name = $(this).text();
$(this).html('');
$('<input></input>')
.attr({
'type': 'text',
'name': 'fname',
'id': 'txt_fullname',
'size': '30',
'value': name
})
.appendTo('#fullname');
$('#txt_fullname').focus();
});
$(document).on('blur','#txt_fullname', function(){
var name = $(this).val();
$.ajax({
type: 'post',
url: 'change-name.xhr?name=' + name,
success: function(){
$('#fullname').text(name);
}
});
});
This is demostrated in this jsfiddle
Upvotes: 20
Reputation: 610
Why not just stay with one input field, and change the field styles on blur. You can take everything away so it doesnt look like an input, that way there's no need to change back and forth. Make an Ajax call on blur.
Upvotes: 2
Reputation: 3289
There is jEditable: http://www.appelsiini.net/projects/jeditable
However, X-editable looks much nicer: http://vitalets.github.io/x-editable/
Upvotes: 6
Reputation: 82357
You named the whole process already.
First, assign all of your numbers or fields with some class.
<div class="editable">value</div>
Then, assign that class a click event.
$('.editable').click(function(){
//replace element with input element containing the value
//attach an onblur event to the new element
$(newelement).blur(function(){
//use $.ajax to send the element's value to your server
//remove the input element and then replace the previous element with the new value
});
});
Upvotes: 1
Reputation: 271
It is called jQuery edit in place. There are a number of plugins available from jQuery for that.
Upvotes: 3