contenu modifiable position du curseur

J'ai un div c'est le contenu modifiable, et je tiens à cliquer sur le bouton modifier et le curseur apparaît au début de la div, à la minute, il apparaît à la fin.

<li style="display: list-item;" class="menu-item" contenteditable="true">
<div class="">Dior<input type="checkbox" name="selected"></div>
<ol class="">
    <li style="display: list-item;" class="menu-item">
    <div class=""><a href="/portfolios/charlize-theron" class="" name="">Charlize-Theron</a>
    <input type="checkbox" name="selected"></div>
    </li>
    <li style="display: list-item;" class="menu-item">
    <div class=""><a href="/portfolios/natalie-portman" class="" name="">Natalie-Portman</a>
    <input type="checkbox" name="selected"></div>
    </li>
    <li style="display: list-item;" class="">
    <div class=""><a href="/portfolios/sharon-stone-1" class="" name="">Sharon-Stone</a>
    <input type="checkbox" name="selected"></div>
    </li>
</ol>
<a href="#" class="edit" style="opacity: 1; ">Edit</a></li>

Ainsi, lorsque vous cliquez sur modifier dans la minute, vous avez de la touche de la flèche de retour pour le début de modifier le Dior (qui est la seule chose qui vraiment est édité). mais j'ai essayé d'ajouter le contenu modifiable code de la div seulement et il ne fonctionne pas.

Voici une partie de mon jQuery

$(".edit").click(function(){
            $(this).parent().children("div").focus(function(){

            });
        });

        $(".edit").hover(function(){
            $(this).css("opacity","0.5")
        }, function(){
            $(this).css("opacity","1")
        });

        $(".edit").parent().blur(function(){
            var sortableList = $(".sortable").html();
            $("#ItemDescription").val(sortableList);
        });

function storeUserScribble(id) {
                var scribble = $("li div").text();
                localStorage.setItem('userScribble',scribble);
              }

              function getUserScribble() {
                if ( localStorage.getItem('userScribble')) {
                  var scribble = localStorage.getItem('userScribble');
                }
                else {
                }
              }

              function clearLocal() {
                clear: localStorage.clear();
                return false;
              }

Si quelqu'un peut jeter quelque lumière sur pourquoi le curseur n'est pas à l'avant de la div automatiquement susceptible de l'aider. J'aimerais définir la position du curseur au début IE Avant la DIOR.

Merci pour l'aide!

OriginalL'auteur Tara Irvine | 2011-08-29

contenteditable jquery

jsFiddle: http://jsfiddle.net/X6Ab8/

Code:

$(".edit").click(function(e) {
    e.preventDefault();

    var div = $(this).parent().children("div")[0];
    div.focus();

    if (window.getSelection && document.createRange) {
        //IE 9 and non-IE
        var sel = window.getSelection();
        var range = document.createRange();
        range.setStart(div, 0);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.body.createTextRange) {
        //IE < 9
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(div);
        textRange.collapse(true);
        textRange.select();
    }
});

C'est exactement ce que je cherche! Quand je clique sur le bouton modifier-je obtenir des poignées de redimensionnement :S de toute façon d'éviter cela? Merci!
Je voudrais faire tous les contrôles de formulaire non-modifiable (à l'aide de contenteditable="false") si vous voulez leur fonction.
Désolé, comment dois-je faire? Dans Firefox, j'obtiens les poignées de redimensionnement sur le lien, je n'en veux pas, mais que la div doit être modifiable. Des idées?
Je me rends compte que mon commentaire est plus tard, mais il y a une règle CSS du W3C navigateurs. Voir: stackoverflow.com/questions/826782/... Pour IE, vous aurez besoin d'ajouter un autre attribut HTML unselectable='on

OriginalL'auteur Tim Down

1

Vérifier: Définir la position du curseur sur contentEditable <div>

En plus de IE, consultez également le document.sélection.createRange.

OriginalL'auteur zvona

Vous devez vous connecter pour publier un commentaire.