Блог

Главная - Вопросы по программированию - Текстовое поле Javascript в переменную

Текстовое поле Javascript в переменную

#javascript

#javascript

Вопрос:

Я работал над небольшим проектом в течение дня или двух. Код следующий.

 <!DOCTYPE html>
<html>
<head>
<script>

function search() 
{
document.getElementById("text1").value


window.location.hash = "myVariable";
}
</script>

</head>
</body>
<form name="myform">
<input type="text" name="text1" value="">
<input type="button" value="Search" onclick="search()">
</form>


<div style="height: 4000px"></div>
<span id='yeah'>I have successfully jumped.</span>
<div style="height: 4000px"></div>

</body>
</html>

Теперь вам может быть интересно, чего я пытаюсь достичь с помощью этого кода? Ну, я хочу ввести значение в текстовое поле, а затем оно переместит меня в раздел (раздел — это значение в текстовом поле). Это вроде как поисковая система, но это не так.

Например, раздел «да». Когда пользователь вводит yeah в текстовое поле, предполагается, что он переводит их в раздел yeah. Вместо этого ничего не происходит. И, несмотря на поиск по всему Интернету, я не нашел ответа, который удовлетворял бы моим потребностям, поэтому я бы любезно попросил вас объяснить мне, в чем заключается моя проблема, и, возможно, дать мне решение моей проблемы.

Я использую веб-браузер Mozilla Firefox (если эта информация необходима).

Ответ №1:

Попробуйте это:

 function search() 
{
  var elID= document.getElementById("text1").value;
  var el = document.getElementById(elID);

  el.scrollIntoView(true);
}

Метод Element .scrollIntoView() прокручивает элемент в поле зрения

Онлайн-демонстрация

Ответ №2:

Dalorzo’s должно работать, но jQuery может быть лучшим вариантом, чем raw javascript, если вы планируете добавить больше, чем просто эту функцию.

Вот пример того, что вы пытаетесь сделать.

 $("#button1").click(function() {
    var t = $("#text1").val();

    alert(t);

    $('html, body').animate({
        scrollTop: $("#" t).offset().top
    }, 2000);
});

Комментарии:

1. Я бы предложил другой способ — для простых задач, подобных этой, raw JavaScript является гораздо предпочтительнее решением и приведет к снижению накладных расходов.

2. Верно, это намного тяжелее. Если это единственный необходимый javascript, то да, raw логичен. Я делаю предположение, что эта функция будет расширена.

3. Это все, что я хочу сделать с этой функцией. Тем не менее, jQuery кажется интересным, и я думаю, что я подробнее изучу его. Итак, я думаю, вы в некотором роде решили мою проблему.