#javascript #html #jquery
Вопрос:
У меня здесь есть набор входных данных, которые автоматически объединяются при последнем вводе.
Проблема в том, что я хотел бы изменить его так, чтобы он не объединял пустые входные данные.
Способ, которым он используется прямо сейчас, заключается в том, что пользователь должен вручную стереть автоматически сгенерированный интервал или запятую пустым вводом. Этого не должно быть…
Пожалуйста, посмотрите мой простой код:
$('#month2, #day2, #year2, #pl1a, #pl2a, #div2, #title2, #subtitle2, #chapter2, #subchapter2, #section2, #stat1a, #stat2a').bind('keypress blur', function() { $('#input13').val('Act ' $('#month2').val() ' ' $('#day2').val() ', ' $('#year2').val() ', ' 'P.L. ' $('#pl1a').val() '-' $('#pl2a').val() ', ' 'Div ' $('#div2').val() ', ' 'Title ' $('#title2').val() ', ' 'Subtitle ' $('#subtitle2').val() ', ' 'Ch ' $('#chapter2').val() ', ' 'Subch ' $('#subchapter2').val() ', ' '§ ' $('#section2').val() ', ' $('#stat1a').val() ' Stat. ' $('#stat2a').val() ', provides:' ); }); lt;script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"gt;lt;/scriptgt; lt;form autocomplete="off"gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="month2" placeholder="Month"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="day2" placeholder="Day"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="year2" placeholder="Year"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="pl1a" placeholder="117"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="pl2a" placeholder="XXX"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="div2" placeholder="Div"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="title2" placeholder="Title"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="subtitle2" placeholder="Subtitle"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="chapter2" placeholder="Chapter"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="subchapter2" placeholder="Subchapter"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="section2" placeholder="Section"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="stat1a" placeholder="134"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="stat2a" placeholder="Page"/gt; lt;/formgt; lt;form class="mt-3" autocomplete="off"gt; lt;input class="form-control form-control-sm inputcopybtn no-enter" type="text" id="input13" placeholder="Result"/gt; lt;/formgt; Кроме того, если эти пустые входные данные не будут объединены, это означает, что теперь мне придется немного изменить свой код, так как он автоматически генерирует некоторый важный текст после ввода для следующего ввода, чтобы вместо этого добавить его перед вводимой информацией.
напр.
$('#div2').val() ', ' 'Title ' $('#title2').val() ', ' 'Subtitle ' Строка «Заголовок» после ввода «div2» должна быть частью ввода под ней, предшествовать вводу «Заголовок» и так далее…
подобный этому:
Ответ №1:
Вы можете использовать что-то вроде этого:
$('#month2, #day2, #year2, #pl1a, #pl2a, #div2, #title2, #subtitle2, #chapter2, #subchapter2, #section2, #stat1a, #stat2a').bind('keypress blur', function() { function date() { var m = $('#month2').val(); var d = $('#day2').val(); var y = $('#year2').val(); if (m amp;amp; d amp;amp; y) { return 'Act ' m ' ' d ', ' y; } } function pla() { var p1 = $('#pl1a').val(); var p2 = $('#pl2a').val(); if (p1 amp;amp; p2) { return 'P.L. ' p1 '-' p2; } } function getValue(element, prefix = '') { var value = $(element).val(); if (value) { return prefix value; } } // filter will remove empty elements when function return undefined $('#input13').val([ date(), pla(), getValue('#div2', 'Div '), getValue('#title2', 'Title '), getValue('#subtitle2', 'Subtitle '), getValue('#chapter2', 'Ch '), getValue('#subchapter2','Subch '), getValue('#stat1a'), getValue('#stat2a', ' Stat. '), 'provides:' ].filter(Boolean).join(', ')); }); lt;script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"gt;lt;/scriptgt; lt;form autocomplete="off"gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="month2" placeholder="Month"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="day2" placeholder="Day"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="year2" placeholder="Year"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="pl1a" placeholder="117"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="pl2a" placeholder="XXX"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="div2" placeholder="Div"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="title2" placeholder="Title"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="subtitle2" placeholder="Subtitle"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="chapter2" placeholder="Chapter"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="subchapter2" placeholder="Subchapter"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="section2" placeholder="Section"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="stat1a" placeholder="134"/gt; lt;br/gt; lt;input class="form-control form-control-sm mt-1 no-enter" type="text" id="stat2a" placeholder="Page"/gt; lt;/formgt; lt;form class="mt-3" autocomplete="off"gt; lt;input class="form-control form-control-sm inputcopybtn no-enter" type="text" id="input13" placeholder="Result"/gt; lt;/formgt; Если у вас есть код, который немного сложнее, чем вы можете обработать, разделите код на функции.
Комментарии:
1. Ого, это очень аккуратное решение! Я проверил это, и это именно то, что я искал. Большое вам спасибо, я действительно ценю ваше время на создание этого сценария!
Title ' ('#title2').val() ', '
Ответ №1:
Вы можете использовать что-то вроде этого:
Если у вас есть код, который немного сложнее, чем вы можете обработать, разделите код на функции.
Комментарии:
1. Ого, это очень аккуратное решение! Я проверил это, и это именно то, что я искал. Большое вам спасибо, я действительно ценю ваше время на создание этого сценария!