Как сделать подобный input?

158

27 ноября 2018, 08:00

https://www.tinkoff.ru/loans/cash-loan/ Не реклама!

Внизу форма, в этой форме есть поле для ввода телефона. В нем:

есть неудаляемая часть текста "+7("
placeholder появляется при вводе текста
маска

2 пукнт совсем не понимаю как реализовать, а 1 и 3 вроде сделал, но тоже. Они конфликтуют...

    $(function(){
  $("#phonereg").mask("+7 (999)999-99-99");
});
var $inp = $("#phonereg"), prevVal = '',
    reference = "+7(";
function change (val) {
    var ind = val.indexOf(reference);
    if (ind !== 0) {
        $inp.prop("value", prevVal || reference);
    } else {
        prevVal = val;
    }
}
$inp.on("input", function () {
    var val = $(this).prop("value");
    change(val);
});

Пример: http://jsfiddle.net/gob6u82m/1/

Answer 1

Наподобие такого?

var mask = "+7 (999)999-99-99", 
    mask2 = "+7 (___)___-__-__"; 
var $inp = $("#phonereg"),  
		$inp2 = $("#phoneregback"),  
		prevVal = '', 
    reference = "+7 ("; 
     
$(function(){ 
  $("#phonereg").mask(mask); 
}); 
$inp.on("input", function () { 
  $inp2.prop("value", mask2); 
  var val = $(this).prop("value"); 
  if(val.indexOf(reference) == -1) { 
  	$inp.blur(); 
		$inp.prop("value", reference); 
    setTimeout(function() { 
    	$inp.focus(); 
    }, 100); 
  } 
}); 
$inp.on("focus", function () { 
	$inp2.prop("value", mask); 
}); 
$inp.on("blur", function () { 
	$inp2.prop("value", " "); 
}); 
$('#phonereg').on('keydown', function() { 
  var val = $(this).prop("value"); 
  var key = event.keyCode || event.charCode; 
  if(val == reference) { 
    if( (key == 8) || (key < 48 || key > 57)) 
      return false; 
  } else { 
  	if((key > 46 && (key < 48 || key > 57))) 
      return false; 
  } 
});

#phoneregback { 
  position: absolute; 
  background-color: transparent; 
  font-family: Arial; 
  color: #dcdcdc; 
} 
#phonereg { 
  position: relative; 
  background-color: transparent; 
  font-family: Arial; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script> 
 
<input type="text" id="phoneregback" value="" placeholder=""> 
<input type="text" id="phonereg" value="+7 (" placeholder="">