SORU
25 Temmuz 2009, CUMARTESİ


Doğal ses < Set imleç konumu;div>

Çapraz tarayıcı kesin bir çözüm sonra bir doğal ses='' <div>ne zaman son bilinen pozisyonu için imleç/şapka konumu belirtmek istiyorum odak kavuşur. İstenmeyen bir durum, içerik düzenlenebilir bir div işlevselliğini div her zaman metnin başına şapka/imleci hareket ettirmek için varsayılan üzerinde tıklatın.

Sanırım var mağazadan bir değişken imlecin bulunduğu zaman ayrılıyorlar odak div ve sonra re-set varken odak içinde tekrar, ama ben mümkün değil bir araya getirmek ya da bir çalışma kod örneği, henüz.

Eğer kimse herhangi bir düşünce, kod parçacıkları veya çalışma örnekleri varsa onları görmek için mutlu olurdum.

Gerçekten herhangi bir kod yok ama burada var:

<script type="text/javascript">
// jQuery
$(document).ready(function() {
   $('#area').focus(function() { .. }  // focus I would imagine I need.
}
</script>
<div id="area" contentEditable="true"></div>

PS. Bu kaynak denedim ama bir işe&; div^ lt yok gibi görünüyor . . Belki button (How to move cursor to end of contenteditable entity) sadece

CEVAP
24 Temmuz 2010, CUMARTESİ


Bu çözüm, tüm büyük tarayıcılarda çalışır:

saveSelection() div onmouseup onkeyup olaylara bağlı ve değişken savedRange seçimi kaydeder.

restoreSelection() div onfocus olaya bağlı olduğu ve seçimi savedRange kaydedilen reselects.

Bu mükemmel çalışıyor sürece istediğiniz seçimi için geri tıkladığında div yanı (biraz unintuitative olarak normalde beklediğiniz imleci nereye gitmek için tıklayın ama kodu dahil kabul eder)

onclick onmousedown olayları işlevi çapraz tarayıcı olan cancelEvent() tarafından iptal edilir bunu başarmak için olay iptal etmek için işlev. cancelEvent() işlevi de click olayına div odak almaz iptal edilir ve bu nedenle hiçbir şey bu işlevleri çalıştırmak sürece hiç seçilir çünkü restoreSelection() fonksiyonu çalıştırır.

Değişken isInFocus odak ve "" onblur "" onfocus. doğru yanlış değiştirilip mağazaları Bu tıklama olayları div odak (aksi takdirde seçim tüm değiştirmek mümkün olmaz) ise sadece iptal olmasını sağlar.

İstiyorsanız, seçim için değiştirmek div dir odaklı bir tıklayın ve geri yükleme seçimi onclick (sadece zaman odak noktası verilen eleman programtically kullanarak document.getElementById("area").focus(); veya benzeri sonra sadece Kaldır onclick onmousedown olaylar. onblur olay onDivBlur() cancelEvent() fonksiyonları da güvenli bir şekilde bu durumlarda kaldırılabilir.

Bu kod, eğer varsa, hızlı bir şekilde test etmek isterseniz doğrudan bir html sayfasının gövde içine düştü eğer bir bilgisayar olmalı

<div id="area" style="width:300px;height:300px;" onblur="onDivBlur();" onmousedown="return cancelEvent(event);" onclick="return cancelEvent(event);" contentEditable="true" onmouseup="saveSelection();" onkeyup="saveSelection();" onfocus="restoreSelection();"></div>
<script type="text/javascript">
var savedRange,isInFocus;
function saveSelection()
{
    if(window.getSelection)//non IE Browsers
    {
        savedRange = window.getSelection().getRangeAt(0);
    }
    else if(document.selection)//IE
    { 
        savedRange = document.selection.createRange();  
    } 
}

function restoreSelection()
{
    isInFocus = true;
    document.getElementById("area").focus();
    if (savedRange != null) {
        if (window.getSelection)//non IE and there is already a selection
        {
            var s = window.getSelection();
            if (s.rangeCount > 0) 
                s.removeAllRanges();
            s.addRange(savedRange);
        }
        else if (document.createRange)//non IE and no selection
        {
            window.getSelection().addRange(savedRange);
        }
        else if (document.selection)//IE
        {
            savedRange.select();
        }
    }
}
//this part onwards is only needed if you want to restore selection onclick
var isInFocus = false;
function onDivBlur()
{
    isInFocus = false;
}

function cancelEvent(e)
{
    if (isInFocus == false && savedRange != null) {
        if (e && e.preventDefault) {
            //alert("FF");
            e.stopPropagation(); // DOM style (return false doesn't always work in FF)
            e.preventDefault();
        }
        else {
            window.event.cancelBubble = true;//IE stopPropagation
        }
        restoreSelection();
        return false; // false = IE style
    }
}
</script>

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • beautyexchange

    beautyexchan

    4 EYLÜL 2006
  • sknbp

    sknbp

    16 Kasım 2006
  • Tutorials Junction

    Tutorials Ju

    1 Ocak 2014