Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Потеря фокуса input

Динамически создаю инпут:
$('body').on('click', '#singular-atts-list td', function() {
	var _this = $(this);
	if ( !_this.hasClass( 'edit' ) ) {
		_this.html('<input class="edit-attribute" type="text" value="'+_this.text()+'" />');
		_this.children('input').focus();
	}
	_this.addClass('edit');
});

Как отловить потерю фокуса на динамически созданный элемент?
Делаю так:
$('body').on('focusout', '#singular-atts-list td input[type="text"]', function() {
	$('#singular-atts-list td').html($(this).val);
});

Но, не работает...
Пробовал вместо focusout blur, то же самое.
Ответ: Спасибо, точно. А я и не увидел
Вопрос: Получение фокуса при нажатии на кнопку

Создал форму

HTML5
1
2
3
4
<form action="">
    <input type="text" class = "back">
    <input type="text" class = "next">
</form>
Хочу, что бы при нажатии на кнопку W - получал фокус input с классом back, а при нажатии на кнопку S - input с классом next

Как мне это осуществить, какие события использовать?
Ответ:
Сообщение от j2FunOnly
кнопки на клавиатуре
И это поправимо - событие keydown, но опять же вопросы к ТС. Что делать, если фокус уже в каком-либо из input-ов? А регистр должен учитываться? Пока предложу :
Javascript
1
2
3
4
5
6
7
8
var inp = $(':text');
$(document).on('keydown', function(e) {
  var indx = [87, 83].indexOf(e.which);
  if (inp.get().indexOf(e.target) === -1 && indx !== -1) {
    e.preventDefault();
    inp.eq(indx).focus();
  }
});
Т.е. если фокус в этих input-ах, то W и S вводятся, как обычно. И , где даже при фокусе на input-ах, событие будет отрабатывать и фокус меняться (или не меняться, если он уже в нужном поле):
Javascript
1
2
3
4
5
6
7
8
var inp = $(':text');
$(document).on('keydown', function(e) {
  var indx = [87, 83].indexOf(e.which);
  if (indx !== -1) {
    e.preventDefault();
    inp.eq(indx).focus();
  }
});
Ахтунг! Т.к. примеры в песочнице работаю во фреймах, для начала тестирования, нужно перевести фокус на фрейм вывода результата. Проще говоря, где-нибудь на этом фрейме кликнуть.
Вопрос: Input text в форме, запретить отправку формы

Есть форма в ней кучка инпутов всех мастей у всех есть атрибут required. Есть один Input text в котором вся проблема, в нем пользователь вводит текст нажимает интер, и текст переплывает в новую кнопку (ввод тэгов, как на ютубе вообщем) , это все находится в форме.
Проблема в том что как только пользователь нажимает интер то тут же срабатывает required, который ругается на предыдущий инпут.
Вопрос:
Можно ли как то исключить этот инпут из обработки формы?
Как сделать так что бы по нажатию интер в инпуте, форма не реагировала на это нажатие?

Я пробовал запретить отправку формы если этот инпут в фокусе, но не помогло, required все равно ругался, может быть его как то по другому обходить надо? Или же все таки мой код запрета отправки просто не работал.

Вот код который у меня сейчас есть


<form id="main_form" enctype="multipart/form-data" action="/V2/script/sendpost.php" method="POST">
<input class="input" type="text" placeholder="Наименование объявления" name="short" required />
<br>
<br>
<input class="input" id="tag_input" type="text" placeholder="теги для поиска" required/><!--тот самый инпут, он обратывается на Jquery см ниже--><br>
<div style="display:inline-block; height:40px;" id="tag_parent" ></div>
<br>
<br>
<textarea class="input" cols="60" id="about" rows="5" placeholder="Краткое, но четкое описание..." name="about" required ></textarea><br>
<hr>
<select class="select" name="country" id="country2" onchange="CityUpdateNotAll2()">
<?php include("script/countrylist.php"); ?>
</select>
<select class="select" name="city" id="city2">
<?php include("script/citylist.php"); ?>
</select>
<select class="select" name="cat">
<?php include("script/catlist.php"); ?>
</select>
<hr>
<input class="input" type="text" placeholder="#цена" name="price" required/>
<br>
<br>
<span class="label">Загрузите фотографии:</span><br>
<input type="file" multiple accept="image/jpeg,image/png" name="userfile[]"/><br><br>
<input class="submit" type="submit" value="опубликовать"/><br>
</form>



$("#tag_input").keyup(function(e){
if(e.keyCode == 13)
{
if($("#tag_input").val().length != 0)
{
$("#tag_parent").html($("#tag_parent").html()+"<input name='tags[]' type='text' readonly style='background:whitesmoke; border:1px solid black; cursor:pointer;' class='tag_lab' value="+$("#tag_input").val()+" />&nbsp;");
$("#tag_input").val("");
}
}

$(".tag_lab").click(function(){
$(this).remove();
});

$( "#main_form" ).submit(function( event ) {
if ($("#tag_input").is(":focus") ) event.returnValue = false;
});

});
Ответ:
Убрать reuired

здесь

<input class="input" id="tag_input" type="text" placeholder="теги для поиска" required/>
Вопрос: Появление div после заполнения input

Здравствуйте! Подскажите пожалуйста, как реализовать чтобы после заполнения поля автоматически (на jquery) появлялся div с текстом? К примеру есть input, в нем человек ввел текст и снизу появился div. Заранее спасибо!
Ответ: Согласитесь, что
Сообщение от PonyS
чтобы не срабатывало как только 1 символ ввели
и
Сообщение от PonyS
чтобы после заполнения поля
понятия слишком разные. Первое, это что считать заполнением, а второе как раз и может быть условием такового. onblur - это потеря фокуса, а заполнено или нет, это надо проверять дополнительно.
Вопрос: Вставить в Input данные из других input'ов

Помогите вставить данные из 3 input в 1 input главный.
Как такое реализовать через class'ы.

Сделал через onkeydown, работает, но вставляет только данные из текущего input, а мне надо что бы оно проходило по всем input и вставляло данные из них в главный input и разделяло их через +

Вот как сделал я :
<input type="text" value="" id="main">

<input type="text" value="" class="child" onkeyup="document.getElementById('main').value=this.value;">
<input type="text" value="" class="child" onkeyup="document.getElementById('main').value=this.value;">
<input type="text" value="" class="child" onkeyup="document.getElementById('main').value=this.value;">
Ответ:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.rawgit.com/finom/balalaika/master/balalaika.min.js"></script>
    <script>
        $(function() {
          $.index=function(elem){var i=0;while(elem=elem.previousSibling){elem.nodeType==1&&i++}return i}
            var data = {},
                output;
            $('.child').on('keyup', function() {
                data['input' + $.index(this)] = this.value;
                output = Object.keys(data).map(function(e) {
                    return data[e];
                });
                main.value = output.join(' ');
            });
        });
    </script>
</head>

<body>
    <input type="text" value="" id="main" />
    <input type="text" value="" class="child" />
    <input type="text" value="" class="child" />
    <input type="text" value="" class="child" />

</body>

</html>

вместо разделителя +, поставил пробел.
Вопрос: Ввод данных в input вместо всплывающего окна браузера

Здравствуйте. Имеется JS код, который запоминает в куках браузера имя посетителя, и выводит его при последующих заходах, код рабочий, но здесь нужно указывать имя во всплывающем окне браузера, мне же нужно, чтобы вместо окна на странице были 2 input поля с кнопкой, куда посетитель будет вводить свои имя и фамилию. Помогите, пожалуйста исправить данный код.

function set_cookie ( name, value, expires_year, expires_month, expires_day, path, domain, secure )
{
  var cookie_string = name + "=" + escape ( value );
 
  if ( expires_year )
  {
    var expires = new Date ( expires_year, expires_month, expires_day );
    cookie_string += "; expires=" + expires.toGMTString();
  }
 
  if ( path )
    cookie_string += "; path=" + escape ( path );
 
  if ( domain )
    cookie_string += "; domain=" + escape ( domain );
 
  if ( secure )
    cookie_string += "; secure";
 
  document.cookie = cookie_string;
 
}
 
function delete_cookie ( cookie_name )
{
  var cookie_date = new Date ( );  //Текущая дата и время
  cookie_date.setTime ( cookie_date.getTime() - 1 );
  document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}
 
function get_cookie ( cookie_name )
{
  var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
 
  if ( results )
    return ( unescape ( results[2] ) );
  else
    return null;
}
 
if ( ! get_cookie ( "username" ) )
{
  var username = prompt ( "Пожалуйста, ведите Ваше имя", "" );
 
  if ( username )
  {
    var current_date = new Date;
    var cookie_year = current_date.getFullYear ( ) + 1;
    var cookie_month = current_date.getMonth ( );
    var cookie_day = current_date.getDate ( );
    set_cookie ( "username", username, cookie_year, cookie_month, cookie_day );
    document.location.reload( );
  }
}
else
{
  var username = get_cookie ( "username" );
  document.write ( "Привет, " + username + ", добро пожаловать на сайт!" );
  document.write ( "<br><a href=\"javascript:delete_cookie('username'); document.location.reload( );\">Забудь обо мне!</a>" );
}
Ответ: Malleys,
Код рабочий, но нужно кое что исправить. Буду признателен, если поможете.

1. Нужно убрать на страницах кнопку/функцию "Забудь обо мне!"
2. Надо чтобы введенные пользователем имя (name) и фамилия (family-name) выводились на странице page2.html по отдельности, чтобы можно было поставить их в разные части страницы.

<section id="user-greeting">
    <form>
        <label>
            Имя
            <input type="text" autocomplete="name" name="name" required>
        </label>
        <label>
            Фамилия
            <input type="text" autocomplete="family-name" name="family-name" required>
        </label>
        <button onclick="location.href='https://site.ru/page2.html'">Запомнить</button>
    </form>
    <section>
        Привет, <span class="name"></span>, добро пожаловать на сайт!
        <button id="user-greeting-forget-button">Забудь обо мне!</button>
    </section>
</section>


(function main() {
        var form = document.querySelector("#user-greeting > form");
        var section = document.querySelector("#user-greeting > section");
        
        function changeView() {
            if ("name" in localStorage) {
                form.style.display = "none";
                section.style.display = "";
                document.querySelector("#user-greeting .name").textContent = localStorage.name;
            } else {
                section.style.display = "none";
                form.style.display = "";
            }
        }
        
        form.addEventListener("submit", function(event) {
            event.preventDefault();
            var data = new FormData(form);
            localStorage.name = [data.get("name"), data.get("family-name")].join(" ");
            changeView();
        });
        
        document.getElementById("user-greeting-forget-button").addEventListener("click", function() {
            delete localStorage.name;
            changeView();
        });
        
        changeView();
    })();
Вопрос: связать input с меню

Добрый день, такая проблема. Нужно на сайте выбрать регион и передать его в input и при обновлении страницы или переходе на другие страницы в input отображался выбранный регион.
Ответ: Поставьте полю autocomplete и браузер сам его запомнит по имени и вставит что было последний раз вставлено. Это чтоб не мучиться с куками.
Вопрос: Проверка input[text] + input[checkbox]

Добрый день, уважаемые участники сообщества. Помогите, пожалуйста, новичку JS, но опытному верстальщику, решить проблему.

Суть: есть 4 (n) чекбокса input[checkbox], которые активируют поля для ввода input[text]. В поля для ввода вносится число от 0 до 100 (проверка проходит отдельно, для решения вопроса не требуется).

Необходимо: сосчитать количество активных чекбоксов из n доступных, сосчитать сумму чисел активных полей для ввода, высчитать среднее арифметическое и вывести в отдельную переменную.

Кроме того, хотелось бы реализацию без кнопок и перезагрузки страницы, чтобы среднее арифметическое обновлялось при каждом изменении полей для ввода.

<ul>
	<li><input type="checkbox" /><input type="text" maxlength="3"/></li>
	<li><input type="checkbox" /><input type="text" maxlength="3"/></li>
	<li><input type="checkbox" /><input type="text" maxlength="3"/></li>
	<li><input type="checkbox" /><input type="text" maxlength="3"/></li>
</ul>
Ответ: avdotion,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  [type="checkbox"]+input{
    display: none;
  }
   :checked+input{
     display: inline;
   }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
 function calc() {
        var sum = [0,0,0];
        $(":checked+input").val(function(i, v) {
            var num = +v || 0;
            num > 100 && (num = 100);
            num < 0 && (num = 0);
            sum[0] += num;
            sum[1] = ++i;
            sum[2] = (sum[0]/sum[1]).toFixed(2)
            return num||""
        });
        $(".res").html(sum.join(" "))
    }
   $('[type="text"]').on("input", calc)
   $('[type="checkbox"]').on("click", calc)
});
  </script>
</head>

<body>
<ul>
  <li><input type="checkbox" /><input type="text" maxlength="3"/></li>
  <li><input type="checkbox" /><input type="text" maxlength="3"/></li>
  <li><input type="checkbox" /><input type="text" maxlength="3"/></li>
  <li><input type="checkbox" /><input type="text" maxlength="3"/></li>
</ul>
<div class="res"></div>

</body>
</html>
Вопрос: Как перетащить текст в поле input и записать его в value?

Всем привет , подскажите плиз нубу.
есть список li (может быть бесконечное количество) и есть несколько input
полей (может быть бесконечное количество), как перетягивая мышью li в input записать содержимое li (текст) в value input в который перетянули, и так любой другой текст из этого списка li в любой другой input? Важно после перемещения текста из li в input удалить перемещенный li, а input в который переместили заблокировать от изменений, что бы в него не переместили другой li из списка но оставить возможность перемещать оставшиеся li в другие input ?
<ul>
  <li>Текст 1</li>
  <li>Текст 2</li>
  <li>Текст 3</li>
  <li>Текст 4</li>
  <li>Текст 5</li>
  <li>Текст 6</li>
  <li>Текст 7</li>
  <li>Текст 8</li>
  <li>Текст 9</li>
  <li>Текст 10</li>
</ul>

<form>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
  <input value=''>
</form>
Ответ:
Сообщение от laimas
Каким образом ее вернуть на место, если ранее было условие "Важно после перемещения текста из li в input удалить перемещенный li"?
ок, давайте скрывать а не удалять )))
Вопрос: Сравнение значений текстового поля input text со значениями radio

Прошу помочь сам новичок в языке java script, буду благодарен
есть текстовое поле:
<input type="text" value="first" id="" name ="but_1" />

так же есть 5 radio:
<input type="Radio" name="v1" value="year">
    <input type="Radio" name="v1" value="apple">
    <input type="Radio" name="v1" value="first">
    <input type="Radio" name="v1" value="wer">
    <input type="Radio" name="v1" value="treck">

необходимо сделать проверку на совпадение значения текстового поля со всеми radio, и включить значение true у того radio, у которого значение совпало со значением текст. поля.
заранее спасибо
Ответ:
Сообщение от Алекс_
необходимо сделать проверку на совпадение значения текстового поля со всеми radio, и включить значение true у того radio, у которого значение совпало со значением текст. поля.
а вот код который соответсвует вашему описанию - вводите ваши слова если такое слово есть среди radio произойдёт отметка

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Тест</title>
</head>
<script>
window.addEventListener("load", function() {
    var inpElems = document.getElementsByName('v1'),
        inpTxt = document.getElementById('bb');
    inpTxt.addEventListener("input", function() {
        var value = this.value;
        Array.prototype.forEach.call(inpElems, function(item) {
            {
                item.checked = item.value == value;
            }
        });
    })

});
</script>
<body>
    <input type="text" value="" id="bb" name ="but_1" />
    <input type="Radio" name="v1" value="year">
    <input type="Radio" name="v1" value="apple">
    <input type="Radio" name="v1" value="first">
    <input type="Radio" name="v1" value="wer">
    <input type="Radio" name="v1" value="treck">
    <output id="result"></output>
</body>
</html>