2011-04-22 17 views
16

खोज का एक बहुत बाद मैं निम्नलिखित धागे पाया:सेट कर्सर स्थिति

define cursor position in form input field

jQuery Set Cursor Position in Text Area

पदों एक पूर्ण रूप एम्बेड कोड या एक असली में से कोई भी में दुर्भाग्य से

उदाहरण दिया गया है। अब मैं सिर्फ कैसे मेरे रूप में (पहले दिए गए लिंक पर) nemisj के कोड या मार्क कोड (दूसरी कड़ी पर) शामिल करने के लिए पता नहीं है:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> 

    <script> 
    $(document).ready(function(){ 
$("#site").focus(function(){ 
    if(this.value == this.defaultValue) { 
     $(this).val("http://"); 
    } 
}); 
    }); 
    </script> 

</head> 
<body> 
<form action="#" method="post"> 
<input id="name" type="text" name="name" value="Name" /><br /> 
<input id="site" type="text" name="mail" value="Website" /><br /> 
<input type="submit" value="Send"> 
</form> 
</body> 
</html> 

मुझे आश्चर्य है कि अगर किसी को कृपया इस के साथ मेरी मदद कर सकता है के रूप में मैं मैं बुरी तरह अटक गया हूँ!

अग्रिम में बहुत धन्यवाद!

यहाँ संपादित कोड है, लेकिन यह अभी भी काम नहीं करता:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> 

    <script> 
function setCursor(node,pos){ 

    var node = (typeof node == "string" || node instanceof String) ? document.getElementById(node) : node; 

    if(!node){ 
     return false; 
    }else if(node.createTextRange){ 
     var textRange = node.createTextRange(); 
     textRange.collapse(true); 
     textRange.moveEnd(pos); 
     textRange.moveStart(pos); 
     textRange.select(); 
     return true; 
    }else if(node.setSelectionRange){ 
     node.setSelectionRange(pos,pos); 
     return true; 
    } 

    return false; 
} 
    $(document).ready(function(){ 
$("#site").focus(function(){ 
    if(this.value == this.defaultValue) { 
    $(this).val("http://"); 

    var node = $(this).get(0); 
    setCursor(node,node.value.length); 
} 
}); 
    }); 
    </script> 

</head> 
<body> 
<form action="#" method="post"> 
<input id="name" type="text" name="name" value="Name" /><br /> 
<input id="site" type="text" name="mail" value="Website" /><br /> 
<input type="submit" value="Send"> 
</form> 
</body> 
</html> 
+1

createTextRange एक इंटरनेट एक्सप्लोरर केवल विधि है। इसका उपयोग न करें –

उत्तर

4

अपने <script></script> टैग के अंदर वह जगह है जहाँ आपकी जावास्क्रिप्ट चला जाता है (हालांकि हम एक अलग फाइल में डालने पसंद करते हैं, ताकि कोई जावास्क्रिप्ट पर रहता है एचटीएमएल पेज स्वयं)।

इसके अंदर, आपके पास $(document).ready() पर कॉल है, जो function() { ... } पास करता है। उस फ़ंक्शन के अंदर वह कोड है जो आपके दस्तावेज़ को लोड होने पर निष्पादित किया जाएगा।

अंदर कि समारोह आप $('#site').focus() जो अपने आप में एक समारोह प्रदान करता है को कॉल किया - इस समय एक ही है कि बुलाया जाएगा जब भी #site तत्व लाभ ध्यान देते हैं। और संभवतः वह जगह है जहां आप कर्सर की स्थिति बदलना चाहते हैं।

तो, Set cursor at a length of 14 onfocus of a textbox से setCursor समारोह लेने आप अपने <script></script> में है कि कहीं भी रख सकते हैं और फिर तुम्हारा कि अंतरतम समारोह के अंदर आप लिख सकते हैं:

if(this.value == this.defaultValue) { 
    $(this).val("http://"); 

    var node = $(this).get(0); 
    setCursor(node,node.value.length); 
} 
+0

विस्तृत उत्तर के लिए धन्यवाद, लेकिन मेरी इच्छा है कि आपने एम्बेड कोड प्रदान किया क्योंकि मैं अभी भी इसे काम नहीं कर सकता। मैंने आपके निर्देश का पालन नहीं किया! :( – Mori

+0

आप जिस कोड को समाप्त कर चुके हैं उसे साझा करने के लिए आप अपना प्रश्न संपादित करना चाहेंगे। – VoteyDisciple

+0

मैंने कोड अपडेट किया। – Mori

2

मुझे लगता है कि मैं अपने setCursor विधि में त्रुटियां मिली थीं। moveStart और moveEnd विधियों दो तर्कों की अपेक्षा करते हैं, पहले इकाई का उपयोग करना चाहिए। इसके अलावा, अंत स्थिति प्रारंभ स्थिति के सापेक्ष प्रतीत होती है। इसलिए मैं

textRange.moveEnd(pos); 
    textRange.moveStart(pos); 

के बजाय लगता है कि आप चाहते हैं

textRange.moveStart('character', pos); 
    textRange.moveEnd('character', 0); 

देखें: http://msdn.microsoft.com/en-us/library/ie/ms536623(v=vs.85).aspx

संबंधित मुद्दे