Как в jquery установить maxlength для другого поля text?

161
01 октября 2021, 05:30

Нужно в первом input type="text" считать длину и устанавливать ее во втором input type="text" как maxlength.

Пока смог добиться что в первом можно посчитать и вывести длину и по клику вывести значение длины. Но, не получается задавать maxlength без клика, а по факту заполнения (или по таймеру) первого input type="text" и установить это значение как значение длины maxlength для второго. И чтобы делалось не по событию, а по таймеру например, чтобы пользователь не кликал и не нажимал ничего.

Вот тут, то что удалось пока добиться своими корявыми руками 

function f1() { 
  $('#cartag').on('click', function() { 
    var input = $(this); 
    var input_lenght = input.val().length; 
    input.next("span").text(input_lenght + " chars"); 
    //console.log(input_lenght); 
    return input_lenght; 
  }); 
} 
 
//f1(); 
 
 
$('#cartag222').on('click', function() { 
  var limitvalue = f1(); 
  console.log(limitvalue); 
  limitText(this, limitvalue); 
}); 
 
function limitText(field, maxChar) { 
  var ref = $(field), 
    val = ref.val(); 
  if (val.length >= maxChar) { 
    ref.val(function() { 
      //console.log(val.substr(0, maxChar)) 
      return val.substr(0, maxChar); 
    }); 
  } 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input id="cartag" type="text" name="car"><span></span> 
 
<input id="cartag222" type="text" name="car222">

Answer 1

если я вас правильно понял, то можно так. при изменении значения первого инпута, устанавливается значение maxlength второго.

С jquery

$('#cartag').on("change", function(){ 
   
  $('#cartag222').attr('maxlength', $(this).val().length); 
  console.log('maxlength for $("#cartag222"): ' + $(this).val().length) 
  $("span").text($(this).val().length) 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input id="cartag" type="text" name="car"><span></span> 
 
<input id="cartag222" type="text" name="car222">

Без использования jquery

let cartag = document.getElementById("cartag"); 
let cartag222 = document.getElementById("cartag222"); 
let out = document.getElementById("out"); 
 
 
cartag.addEventListener("change", () => { 
  cartag222.setAttribute("maxlength", cartag.value.length) 
  out.innerText = cartag.value.length 
  console.log(`maxlength is: ${cartag.value.length}`) 
})
<input id="cartag" type="text" name="car"><span id="out"></span> 
 
<input id="cartag222" type="text" name="car222">

READ ALSO
$.totalStorage is not a function
javascript

$.totalStorage is not a function

данный плагин - totalStorage - подключен в начале загружаемой страницыОднако при его использовании на странице, в консоли Uncaught TypeError: $

 196
Нестыковка ковычек &#39; и &quot; при вызове функции функции
javascript

Нестыковка ковычек ' и " при вызове функции функции

В HTML файле вызываю функцию:

 161
Вопрос по прототипу
javascript

Вопрос по прототипу

Есть небольшой код:

 104
Как можно передать параметр с компонента внутрь worker(redux-saga)?
javascript

Как можно передать параметр с компонента внутрь worker(redux-saga)?

передать в воркер как argsНапример:

 89