I have the following functions to allow a user to press a button that allows them to edit the contents of a div. By clicking a button .rename the div becomes editable and the contents are all selected, and the text-overflow:ellipsis is replaced with text-overflow:clip. When they finish editing, the user clicks enter and the div is no longer editable, and the text-overflow:ellipsis returns.
Everything is working, except that if the text is longer than the size of the div, the now not-editable div shows the text from the end, instead of from the beginning, even though I added additional code that moves the caret to the beginning of the text. Any thoughts on how I can move the view of the div to the location of the cursor/the beginning of the text?
Here's the code:
//Makes tile contenteditable
$('.rename').click(
function() {
var renameThis = $(this).parent().parent().parent().children(':first'), range, selection;
$(renameThis).attr('contenteditable','true').selectText();
$(renameThis).css('text-overflow','clip');
});
//Makes the enter key close the tile editing
$('div.tile').keydown(function(e) {
// trap the return key being pressed
if (e.keyCode === 13) {
// insert 2 br tags (if only one br tag is inserted the cursor won't go to the next line)
var renameThis = this, range, selection;
range = document.createRange();//Create a range (a range is a like the selection but invisible)
range.selectNodeContents(renameThis);//Select the entire contents of the element with the range
range.collapse(true);//collapse the range to the end point. false means collapse to end rather than the start
selection = window.getSelection();//get the selection object (allows you to change selection)
selection.removeAllRanges();//remove any selections already made
selection.addRange(range);//make the range you have just created the visible selection
$(renameThis).attr('contenteditable','false');
$(renameThis).css('text-overflow','ellipsis');
// prevent the default behaviour of return key pressed
return false;
}
});
jQuery.fn.selectText = function(){
this.find('input').each(function() {
if($(this).prev().length == 0 || !$(this).prev().hasClass('p_copy')) {
$('<p class="p_copy" style="position: absolute; z-index: -1;"></p>').insertBefore($(this));
}
$(this).prev().html($(this).val());
});
var doc = document;
var element = this[0];
console.log(this, element);
if (doc.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
}
};div.tile {
width:100px;
height:30px;
background-color:#0C6;
border-style:solid;
border-width: 0px;
border-color:#0C6;
margin: 0px 0px 5px 0px;
color:#FFF;
padding-left:10px;
line-height:30px;
font-size:25px;
cursor:pointer;
/*border-radius: 5px;*/
box-shadow: 0 3px #00994d;
float:left;
font-family: 'Open Sans Condensed', sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="tile webtile">Netflix</div>
<div class="dropdown-this-content-container">
<div class="dropdown-this-content">
<div class="rename">Click here to rename</div>
</div>
</div>
</div>