Setting a Text Field That Has a Jquery Mask on It

Setting a text field that has a JQuery mask on it

I don't see any element in the HTML you provided that would match the text input field being addressed in the ruby code at the top of your posting. e.g. there is nothing there with an ID of 'phone'

Based on the HTML in your question, I would expect the following to work

browser.text_field(:id, "phoneNumbers_value_input").set("5555551234")

Looking at the sample page you linked in the comments, when I use google chrome and the "Inspect Element" function on the input field with the ID of 'phone' I see that there are a number of event listeners associated with the field (blur, focus, input, keydown, keypress, unmask)

The 'focus' one gets my attention in particular, and seeing it there on that field makes me think that you might then need to first fire an event against the same element, such as the onfocus event, in order to activate the field, then try to set the value.

You'll notice that when you manipulate things manually, the field starts out blank, but as soon as it gets focus it displays the format for the input mask to the user, it may well be that this needs to happen first, before it see's any kind of input.

EDIT: In this case, based on feedback from the questioner, the answer turned out to be that they needed to first fire the 'unmask' event against the text field, and THEN .set the value they wanted, in order for things to work correctly when automating the testing. This doesn't exercise the field masking functionality, but then again I doubt the test mandate in this instance is to extensively test a 3rd party (JQuery) addin, and they are more concerned with the business logic etc in the back end, thus simply being able to set the value without the masking code getting in the way is what is needed.

Add input with jquery mask

First of all change id selector #date class .date because you can't have more than one element with the same id.

Second thing you need to move the $('.date').mask('00/00/0000'); inside the $(document).ready(function() {}) method.

Third thing, you have to bind mask to the newly created an input element.
Below is the copy of your working code after the amending the above suggested changes.

    <script type="text/javascript">
    $(document).ready(function () {
        var wrapper = $(".input_fields_wrap"); //Fields wrapper
        var add_button = $(".add_field_button"); //Add button ID
        $(add_button).click(function (e) { //on add input button click
            e.preventDefault();
            $(wrapper).append("<div><input type=\"text\" name=\"mytext[]\" class=\"date\"/><a href=\"#\" class=\"remove_field\">Remove</a></div>");
            $('.date').mask('00/00/0000');
        });

        $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
            e.preventDefault();
            $(this).parent('div').remove();
        })
        $('.date').mask('00/00/0000');
    });
</script>

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" name="mytext[]" class="date"></div>
</div>
<script type="text/javascript">
    $('#date').mask('00/00/0000');
</script>

Set jquery mask on a dynamically inserted input?

set the mask on focus of the input like this

$(document).on("focus", ".valor", function() { 
    $(this).mask("#.##0,00", {reverse: true});
  });

you can probably remove it from document.ready function and also instead of cloning and appending in 2 lines you can shorten it to 1 line with this

$('.control:last').after($('.control:last').clone());

here is a working fiddle https://jsfiddle.net/tv7w3Lku/3/

Side note: cloning an element with ID will create multiple elements with same ID which is probably not the best way, you should just stick with class in this case

How to perform .select() on jQuery masked text input

I think what you are looking for, is this :

$(document).ready(function () {
    jQuery(function ($) {            
        $("#txtMyInput").mask("?9.99");            
    });
    $(".FocusSense").focus(function (e) {
      var that = this;
      setTimeout(function(){$(that).select();},10);
      return false;
    });
});

setTimeout will "queue" the select() execution. So it will select the content after masking is completed.

Working Demo

JQuery input mask fails when load or create a field

I'm not completely sure what you're trying to do since you didn't say what you want to happen -- but let's give it a shot.

Each time your link is clicked, it will evoke the configureMask function. This function selects ALL input elements in the DOM and initializes the inputmask.

Is it your intent to re-initialize all input elements each time this link is clicked? Once the inputmask has been initialized, you don't need to do anything else other then update the value. It's possible that this could be messing something up, if you're trying to initialize an inputmask that has already been initialized.

You can remove the old inputmask on the element if you want, and then re-initialize them, but that doesn't make any sense.

$(".datemask").inputmask('remove');

I feel like what you're trying to do is initialize the inputmask for the injected element.

...
<h:commandLink action="#{someaction}">
    <f:ajax onevent="function(data) { configureMask(this) }"/>
    Click Here
</h:commandLink>
...
function configureMask(element) {
    //if the element was passed in then select it, else select all 
    //elements that have not been processed
    var $elements = element ? $(element) : $(".datemask").not(".datemask-processed");
    $elements.inputmask("dd/mm/yyyy").addClass("datemask-processed");
}

Since you're already using the jquery.inputmask.date.extensions.js library, you have access to all of the default date definitions. You don't need to send in the placeholder for the dd\mm\yyyy, because it's already defined.

//snippet from the `jquery.inputmask.date.extensions.js` library
$.extend($.inputmask.defaults.aliases, { 
        'dd/mm/yyyy': { 
            mask: "1/2/y", 
            placeholder: "dd/mm/yyyy", 
...

How can I put masked date input in a dynamically created text field?

You could do the work inside your insSpec function, where you have both the ID and the markup at your disposal.

Without using the ID:

$(f).find('input[name^="mfd_date"]').mask('99/99/9999');

Using the ID:

$(f).find('#mfd_date'+rl).mask('99/99/9999');

And since that cell really only has one input, you only need to look for the input

$(f).find('input').mask('99/99/9999');

Or you could emit an event after the new row has been created and attach the mask to the last row in the table always, or even pass the last row as data to the event listeners.

---

Related Topics