БЛОГ НА HUSL


Как ввод в input сделать максимум 4 символа?

Автор вопроса: steep

Как ограничить ввод в 4 символа?

maxlength="4" прописал, но он работает вроде как только на клавиатуре.

function addNumber(e){
	var v = $( "#pin" ).val();
	$( "#pin" ).val( v + e.value );
}
function clearForm(e){
	$( "#pin" ).val( "" );
}
#pinloginform {
    width: 320px;
    position: relative;
}

.modal-content {
    border: none;
}
.modal-footer {
    text-align: center;
    border: none;
    position: absolute;
    bottom: 50px;
    width: 100%;
}
#pinerrorhint {
    color: red;
}
#pinloginform .form-group {
    width: 300px;
    text-align: center;
    margin: 0 auto;
}
#pin {
    font-size: 50px;
    text-align: center;
    letter-spacing: 10px;
    background: transparent;
    box-shadow: none;
    margin: 0 0 30px 4px;
    color: green;
    width: 280px;
    border: 1px solid #ddd;
}
.PINbutton {
    border-radius: 50px;
    width: 80px;
    height: 80px;
    line-height: 80px;
    overflow: hidden;
	margin: 0 8px;
  border: none;
}
.PINbutton input {
    width: 80px;
    height: 80px;
    font-size: 32px;
    color: #000;
    font-style: normal;
    padding: 0 !important;
}
.pin-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    left: 0;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.07), 0 1px 5px 0 rgba(0,0,0,0.06), 0 3px 1px -2px rgba(0,0,0,0.1);
}
.PINfooter {
    width: 33.333333%;
    text-align: center;
    font-style: normal;
    border-radius: 0;
    padding: 0;
    margin: 0;
    position: relative;
    display: inline-block;
    bottom: 0;
    height: 50px;
    line-height: 50px;
    float: left;
	border: none;
    background: transparent;
}
.PINfooter input {
    text-transform: uppercase;
    font-size: 29px;
    line-height: 0;
    float: left;
    width: 100%;
    height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="pinloginform" method="post" autocomplete='off' draggable='true'>
                    <div class="modal-body">
                        <div class="form-group">
                            <input id="pin" autocomplete="off" class="form-control" type="password" maxlength="4" placeholder="○○○○" disabled/>			
							
		<input type='button' class='PINbutton waves-effect' name='1' value='1' id='1' onClick=addNumber(this); />
		<input type='button' class='PINbutton waves-effect' name='2' value='2' id='2' onClick=addNumber(this); />
		<input type='button' class='PINbutton waves-effect' name='3' value='3' id='3' onClick=addNumber(this); />
		<br>
		<input type='button' class='PINbutton waves-effect' name='4' value='4' id='4' onClick=addNumber(this); />
		<input type='button' class='PINbutton waves-effect' name='5' value='5' id='5' onClick=addNumber(this); />
		<input type='button' class='PINbutton waves-effect' name='6' value='6' id='6' onClick=addNumber(this); />
		<br>
		<input type='button' class='PINbutton waves-effect' name='7' value='7' id='7' onClick=addNumber(this); />
		<input type='button' class='PINbutton waves-effect' name='8' value='8' id='8' onClick=addNumber(this); />
		<input type='button' class='PINbutton waves-effect' name='9' value='9' id='9' onClick=addNumber(this); />
		<br>
		<input type='button' class='PINbutton waves-effect' name='0' value='0' id='0' onClick=addNumber(this); />
							
                        </div>
                    </div>

    <div class="pin-footer">		
        <input type="button" class="waves-effect PINfooter" value='⌫' data-dismiss="modal">
		<input type='button' class='waves-effect PINfooter' name='-' value='⎚' id='-' onClick=clearForm(this); />
		<input type='submit' class='waves-effect PINfooter' name='+' value='⎆' id='pinlogin' />
    </div>    
                  
                </form>


Источник

Ответы (2 шт):

Автор решения: Igor 
function addNumber(e){
  var v = $( "#pin" ).val() + e.value;
  if (v.length > 4)
    v = v.substr(0, 4);
  $( "#pin" ).val( v );

  if (v.length == 4)
    $(e).closest('form').submit();
}
→ Ссылка
Автор решения: Vadim

Вот код, про свежести читать - тут, и здесь + хорошая дока к языку

+Вижу непонятный футер - удаляю

const doConfirm=()=>{
    console.log('doConfirm');
    $('.PINbutton').attr('disabled', true);

    let pin = $('#pin').val();
    // your code
 
    // ajax post with pin-code

    // when ajax finish:
    $('.PINbutton').attr('disabled', false);
};

$('body').on('click', '.PINbutton', ({currentTarget})=>{
    const value = $(currentTarget).val();
    if(value === 'confirm'){
        doConfirm();
        return false;
    }else if(value === 'clear'){
        $('#pin').val('');
        return false;
    }
    
    let pin = $('#pin').val();
    if(pin.length === 4)return false;
    pin += value;
    $('#pin').val(pin);
    
    console.log(pin, pin.length);
    if(pin.length >= 4)doConfirm();
});
#pinloginform {
    width: 320px;
    position: relative;
}

.modal-content {
    border: none;
}

.modal-footer {
    text-align: center;
    border: none;
    position: absolute;
    bottom: 50px;
    width: 100%;
}

#pinerrorhint {
    color: red;
}

#pinloginform .form-group {
    width: 300px;
    text-align: center;
    margin: 0 auto;
}

#pin {
    font-size: 50px;
    text-align: center;
    letter-spacing: 10px;
    background: transparent;
    box-shadow: none;
    margin: 0 0 30px 4px;
    color: green;
    width: 280px;
    border: 1px solid #ddd;
}

.PINbutton {
    border-radius: 50px;
    width: 80px;
    height: 80px;
    line-height: 80px;
    overflow: hidden;
    margin: 0 8px;
    border: none;
}

.PINbutton input {
    width: 80px;
    height: 80px;
    font-size: 32px;
    color: #000;
    font-style: normal;
    padding: 0 !important;
}

.pin-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    left: 0;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.06), 0 3px 1px -2px rgba(0, 0, 0, 0.1);
}

.PINfooter {
    width: 33.333333%;
    text-align: center;
    font-style: normal;
    border-radius: 0;
    padding: 0;
    margin: 0;
    position: relative;
    display: inline-block;
    bottom: 0;
    height: 50px;
    line-height: 50px;
    float: left;
    border: none;
    background: transparent;
}

.PINfooter input {
    text-transform: uppercase;
    font-size: 29px;
    line-height: 0;
    float: left;
    width: 100%;
    height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="pinloginform" method="post" autocomplete="off" draggable="true">
    <div class="modal-body">
        <div class="form-group">
            <input id="pin" autocomplete="off" class="form-control" type="password" maxlength="4" placeholder="○○○○" disabled/>
            <input type="button" class="PINbutton waves-effect" value="1"/>
            <input type="button" class="PINbutton waves-effect" value="2"/>
            <input type="button" class="PINbutton waves-effect" value="3"/>
            <br>
            <input type="button" class="PINbutton waves-effect" value="4"/>
            <input type="button" class="PINbutton waves-effect" value="5"/>
            <input type="button" class="PINbutton waves-effect" value="6"/>
            <br>
            <input type="button" class="PINbutton waves-effect" value="7"/>
            <input type="button" class="PINbutton waves-effect" value="8"/>
            <input type="button" class="PINbutton waves-effect" value="9"/>
            <br>
            <input type="button" class="PINbutton waves-effect" value="clear"/>
            <input type="button" class="PINbutton waves-effect" value="0"/>
            <input type="button" class="PINbutton waves-effect" value="confirm"/>
        </div>
    </div>
</form>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.