새 입력 값 표시 (공백 추가)

나 같은 초보자에게 물어 보는 것은 당황 스럽지만 html 입력의 숫자 사이에 공백을 추가 한 후 html 입력 필드에 새로운 값을 표시하는 데 큰 골치 거리가 있습니다. 기본적으로, 사용자가 입력을 "언 클릭"한 후 입력 필드의 숫자 사이에 공백을 추가합니다. 예를 들어 123456789123456789는 12 3456 7891 2345 6789로 변경됩니다. 사용자 입력 값을 얻고 원하는 곳에 공백을 추가하지만 입력 필드에 공백을 추가 할 수 없습니다. 내 코드는 다음과 같습니다 :이 작동하지 않는 이유를 이해가 안새 입력 값 표시 (공백 추가)

'use strict'; 
 
$(document).ready(function(){var $inputTwo = $('#separateNumbers'); 
 
    $inputTwo.change(function() { 
 
     var inputNumber = $inputTwo.val(); 
 
     var separatedNumbers = []; 
 
     var part1 = inputNumber.substring(0, 2); 
 
     separatedNumbers.push(part1); 
 
     for (var i = 2; i < inputNumber.length; i += 4){ 
 
      separatedNumbers.push(inputNumber.substring(i, i + 4)) 
 
     } 
 
     var displayNumber = separatedNumbers.join(' '); 
 
     $inputTwo.val(displayNumber); 
 
    }) 
 
});

<body> 
 
    <div class="wrapper"> 
 
     <div id="Task1_2"> 
 
      <h1>Task 1.2</h1> 
 
      <label for="separateNumbers">Write more than 10 digits:</label><br/> 
 
      <input type="number" id="separateNumbers" placeholder=" i.e. 123456789"> 
 
     </div> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</body>

. 마지막 코드 줄을 대체하려고 시도했습니다.

document.getElementById ('separateNumbers'). value = displayNumber;

하지만 나는 콘솔이있어 :

이

지정된 값 "87 6178 1"유효한 번호가 아닙니다. 값은 다음 일반 표현식과 일치해야합니다. -? (\ d + | \ d +. \ d + |. \ d +) ([eE] [- +]? \ d +)?

숫자의 조합에 관계없이 나타납니다.

제발 도와주세요, 나는 ... 할 수있는 어떤 아이디어에서

출처

2016-10-28 Arsengael

작업 벌금을 작동하지 않을 수 있기 때문에 텍스트로 유형을 작동합니다 'blur' 이벤트 btw : https://jsfiddle.net/k5fxu4ff/ – Hackerman

이야 ... 불행히도 아직 정규식을 이해하지 않기 때문에 난 유효한 값이 될 것입니다 모르겠어요 숫자에 공백이 없습니다. 내가 사용 있습니다 .... type = text에 입력을 변경하고는

출처

2016-10-28 15:22:42

고마워요! 나는 이것이 아마도 너무 작아서, 나는 그것을 볼 수는 없지만, 이미 그것에 대해 두 시간을 잃어버린 것이라고 생각했다. 다시 한번 감사드립니다. – Arsengael

변경 추가 공간이 나를 위해 텍스트 형식으로

$(document).ready(function() { 
 

 
    // Displaying new input value (adding spaces) -- Solution 
 

 
    $("#separateNumbers").change(function() { 
 
     $inputTwo = $('#separateNumbers'); 
 

 
     var inputNumber = $inputTwo.val(); 
 
     var separatedNumbers = []; 
 
     var part1 = inputNumber.substring(0, 2); 
 
     separatedNumbers.push(part1); 
 
     for (var i = 2; i < inputNumber.length; i += 4) { 
 
      separatedNumbers.push(inputNumber.substring(i, i + 4)) 
 
     } 
 
     var displayNumber = separatedNumbers.join(' '); 
 
     $inputTwo.val(displayNumber); 
 
    }); 
 

 
    
 

 
});

<body> 
 
    <div class="wrapper"> 
 
     <div id="Task1_2"> 
 
      <h1>Task 1.2</h1> 
 
      <label for="separateNumbers">Write more than 10 digits:</label><br/> 
 
      <input type="text" id="separateNumbers" placeholder=" i.e. 123456789"> 
 
      
 
     </div> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</body>

출처

2016-10-28 17:55:44

새 입력 값 표시 (공백 추가)

답변

관련 문제