Установить положение курсора в текстовом поле ввода

После большого поиска я нашел следующие темы:

определить позицию курсора в поле ввода формы

jQuery Установить положение курсора в текстовой области

К сожалению, ни в одном из сообщений не указывается полный код вставки формы или реальный пример. Теперь я просто не знаю, как включить код nemisj (по первой ссылке) или код Mark (по второй ссылке) в мою форму:

<!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

Внутри вашего тега <script></script> находится ваш JavaScript (хотя мы предпочитаем помещать его в отдельный файл, так что на самой HTML-странице не работает JavaScript).

В этом случае вы вызываете $(document).ready(), который передает function() { ... }. Внутри этой функции находится весь код, который будет выполняться при загрузке документа.

Внутри этой функции есть вызов $('#site').focus(), который сам предоставляет функцию - на этот раз тот, который будет вызываться всякий раз, когда элемент #site получает фокус. И, предположительно, там, где вы хотите изменить позицию курсора.

Итак, беря функцию setCursor из Установите курсор с длиной 14 на фокус текстового поля, вы можете поместить это в любом месте вашего <script></script>, а затем внутри этого самого внутреннего функции, которую вы можете написать:

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

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

Ответ 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