Visualize pattern on UITextField









up vote
0
down vote

favorite












My goal is to create a text field that matches this picture:



enter image description here



Core idea is that:



  • User can't edit pattern symbols (i.e. place cursor there)

  • Pattern symbols get replaced and disappear as the user types

  • There are static pattern symbols (i.e. '-')

Is there a drop-in solution for such things? I've searched over GitHub and there are a lot of libs that do UITextField formatting, but they usually just add symbols and it doesn't actually feel like a placeholder that guides user how to type.



Any suggestions?










share|improve this question























  • What have you tried so far?
    – Carpsen90
    Nov 10 at 20:15














up vote
0
down vote

favorite












My goal is to create a text field that matches this picture:



enter image description here



Core idea is that:



  • User can't edit pattern symbols (i.e. place cursor there)

  • Pattern symbols get replaced and disappear as the user types

  • There are static pattern symbols (i.e. '-')

Is there a drop-in solution for such things? I've searched over GitHub and there are a lot of libs that do UITextField formatting, but they usually just add symbols and it doesn't actually feel like a placeholder that guides user how to type.



Any suggestions?










share|improve this question























  • What have you tried so far?
    – Carpsen90
    Nov 10 at 20:15












up vote
0
down vote

favorite









up vote
0
down vote

favorite











My goal is to create a text field that matches this picture:



enter image description here



Core idea is that:



  • User can't edit pattern symbols (i.e. place cursor there)

  • Pattern symbols get replaced and disappear as the user types

  • There are static pattern symbols (i.e. '-')

Is there a drop-in solution for such things? I've searched over GitHub and there are a lot of libs that do UITextField formatting, but they usually just add symbols and it doesn't actually feel like a placeholder that guides user how to type.



Any suggestions?










share|improve this question















My goal is to create a text field that matches this picture:



enter image description here



Core idea is that:



  • User can't edit pattern symbols (i.e. place cursor there)

  • Pattern symbols get replaced and disappear as the user types

  • There are static pattern symbols (i.e. '-')

Is there a drop-in solution for such things? I've searched over GitHub and there are a lot of libs that do UITextField formatting, but they usually just add symbols and it doesn't actually feel like a placeholder that guides user how to type.



Any suggestions?







ios uitextfield uikit






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 10 at 20:52









rmaddy

237k27308374




237k27308374










asked Nov 10 at 19:49









s1ddok

3,65611022




3,65611022











  • What have you tried so far?
    – Carpsen90
    Nov 10 at 20:15
















  • What have you tried so far?
    – Carpsen90
    Nov 10 at 20:15















What have you tried so far?
– Carpsen90
Nov 10 at 20:15




What have you tried so far?
– Carpsen90
Nov 10 at 20:15












1 Answer
1






active

oldest

votes

















up vote
0
down vote













If you want Xs to disappear and be replaced by digits one by one (and not by whole four-digit groups), you should add not four (as Robert Dresler suggests), but sixteen UITextFields with X placeholder in each of them.



Make the cursor jump to the next field once the current one is filled, and also make it jump to the first field that’s not filled when the user taps on any of the fields (to prevent inputting digits in random positions).






share|improve this answer






















  • Oh, and what do I do when user removes character? I hove to kinda move everything from next text fields?
    – s1ddok
    Nov 11 at 7:46










  • Yes, when the user deletes a character, you should move the cursor to the previous text field. I believe you can use the textField(_:shouldChangeCharactersIn:replacementString:) delegate method for detecting when the user types or deletes characters.
    – Yakov M.
    Nov 11 at 12:01











Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53242793%2fvisualize-pattern-on-uitextfield%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
0
down vote













If you want Xs to disappear and be replaced by digits one by one (and not by whole four-digit groups), you should add not four (as Robert Dresler suggests), but sixteen UITextFields with X placeholder in each of them.



Make the cursor jump to the next field once the current one is filled, and also make it jump to the first field that’s not filled when the user taps on any of the fields (to prevent inputting digits in random positions).






share|improve this answer






















  • Oh, and what do I do when user removes character? I hove to kinda move everything from next text fields?
    – s1ddok
    Nov 11 at 7:46










  • Yes, when the user deletes a character, you should move the cursor to the previous text field. I believe you can use the textField(_:shouldChangeCharactersIn:replacementString:) delegate method for detecting when the user types or deletes characters.
    – Yakov M.
    Nov 11 at 12:01















up vote
0
down vote













If you want Xs to disappear and be replaced by digits one by one (and not by whole four-digit groups), you should add not four (as Robert Dresler suggests), but sixteen UITextFields with X placeholder in each of them.



Make the cursor jump to the next field once the current one is filled, and also make it jump to the first field that’s not filled when the user taps on any of the fields (to prevent inputting digits in random positions).






share|improve this answer






















  • Oh, and what do I do when user removes character? I hove to kinda move everything from next text fields?
    – s1ddok
    Nov 11 at 7:46










  • Yes, when the user deletes a character, you should move the cursor to the previous text field. I believe you can use the textField(_:shouldChangeCharactersIn:replacementString:) delegate method for detecting when the user types or deletes characters.
    – Yakov M.
    Nov 11 at 12:01













up vote
0
down vote










up vote
0
down vote









If you want Xs to disappear and be replaced by digits one by one (and not by whole four-digit groups), you should add not four (as Robert Dresler suggests), but sixteen UITextFields with X placeholder in each of them.



Make the cursor jump to the next field once the current one is filled, and also make it jump to the first field that’s not filled when the user taps on any of the fields (to prevent inputting digits in random positions).






share|improve this answer














If you want Xs to disappear and be replaced by digits one by one (and not by whole four-digit groups), you should add not four (as Robert Dresler suggests), but sixteen UITextFields with X placeholder in each of them.



Make the cursor jump to the next field once the current one is filled, and also make it jump to the first field that’s not filled when the user taps on any of the fields (to prevent inputting digits in random positions).







share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 10 at 22:15

























answered Nov 10 at 22:09









Yakov M.

185




185











  • Oh, and what do I do when user removes character? I hove to kinda move everything from next text fields?
    – s1ddok
    Nov 11 at 7:46










  • Yes, when the user deletes a character, you should move the cursor to the previous text field. I believe you can use the textField(_:shouldChangeCharactersIn:replacementString:) delegate method for detecting when the user types or deletes characters.
    – Yakov M.
    Nov 11 at 12:01

















  • Oh, and what do I do when user removes character? I hove to kinda move everything from next text fields?
    – s1ddok
    Nov 11 at 7:46










  • Yes, when the user deletes a character, you should move the cursor to the previous text field. I believe you can use the textField(_:shouldChangeCharactersIn:replacementString:) delegate method for detecting when the user types or deletes characters.
    – Yakov M.
    Nov 11 at 12:01
















Oh, and what do I do when user removes character? I hove to kinda move everything from next text fields?
– s1ddok
Nov 11 at 7:46




Oh, and what do I do when user removes character? I hove to kinda move everything from next text fields?
– s1ddok
Nov 11 at 7:46












Yes, when the user deletes a character, you should move the cursor to the previous text field. I believe you can use the textField(_:shouldChangeCharactersIn:replacementString:) delegate method for detecting when the user types or deletes characters.
– Yakov M.
Nov 11 at 12:01





Yes, when the user deletes a character, you should move the cursor to the previous text field. I believe you can use the textField(_:shouldChangeCharactersIn:replacementString:) delegate method for detecting when the user types or deletes characters.
– Yakov M.
Nov 11 at 12:01


















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53242793%2fvisualize-pattern-on-uitextfield%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Use pre created SQLite database for Android project in kotlin

Darth Vader #20

Ondo