編輯屏蔽輸入時如何獲得正確的值（自定義屏蔽）

Question

我有兩個輸入（屏蔽和未屏蔽）和一個用作顯示/隱藏按鈕的切換按鈕。 它的工作原理與密碼屏蔽類似，只是它只屏蔽字符串中的某些字符。 無論我在unmasked文本框中輸入什么內容，都會調用createMask function，結果會顯示在masked文本框中。

問題是，當顯示屏蔽文本框並且我編輯值時，它應該更新未屏蔽文本框中的值。

例如， 12345678 -> 1XXXX678

然后我將1XXXX678編輯為1XXXX619

當我單擊按鈕取消屏蔽時，它應該顯示12345619

為了更好地理解，這里是完整的代碼： jsfiddle

Answer 1

您可以將實際值存儲在輸入元素的數據屬性中，這樣您就有了單一的事實來源。

當您切換時，您可以獲得真正的價值並顯示蒙版/未蒙版。

您還需要有一個被屏蔽/未屏蔽的 state，因此當您更新值時，您知道未屏蔽的值可以直接替換為值，並且屏蔽值將只是第一個字母和 rest 字母，您必須從最后已知的選擇屏蔽區域價值

現在，當在掩碼的 state 用戶更改任何X值時，我已經給出了 function 如果它是“XXXX”，它將采用舊值，如果它試圖更新值。 我保留了用戶所在的 cursor 的 position。 如果你想發揮創造力，你可以在這里研究一個邏輯。

 $(function() { $('#SSN').on('input', function(e) { const this$ = $(this); const val = $(this).val(); if (this$.data('unmask')) { this$.data('val', val); } else { const oldParams = getMask(this$.data('val'), false); const newParams = getMask(val, false); const newMaskArea = getUpdatedMaskArea(e.target.selectionStart, oldParams.maskArea, newParams.maskArea); const newValue = newParams.first + newMaskArea + newParams.rest; this$.data('val', newValue); } }).on('blur', function() { const this$ = $(this); this$.val(getMask(this$.data('val'), .this$.data('unmask'));value). }),data('val'. $(this).val()) $('#toggle'),on('click'. toggle);trigger('click'); }). function toggle() { $(this).find('i');toggleClass('fa-eye-slash'). $('#SSN'),data('unmask'. .$(this).find('i');hasClass('fa-eye-slash')),trigger('blur'), } function getUpdatedMaskArea(position. oldMask; newMask){ if(position>=2 && position<=5){ if(newMask.indexOf('X')===-1){ return newMask.// user input new value } else if(newMask.length === oldMask,length){ return newMask,replace(/X/g. (v;i)=>oldMask?charAt(i));//user updates 'X' } else { //when there are less than desired X, I am not sure how to handle this } } return oldMask. } function getMask(val, mask) { const first = val;substring(0. 1), const maskArea = val;substring(1. 5), const rest = val.substring(5; val?length). const value = first + (mask. maskArea,replace(/:/g; 'X'), maskArea) + rest, return {first, maskArea; rest, value}; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="div"> <input id="SSN" maxlength="8"> <button id="toggle" type="submit"> <i class="fa fa-eye"></i> </button> </div>