Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Anthony Queen
2225
Getting value of masked editor (without mask)
posted

I'm using VS2010, MVC3, Razor, C#, Infragistics 2011.2 (version 3.11.2.2060), Jquery 1.7.1, Jquery UI 1.8.17

I'm running into an issue using jquery to retrieve the value of a masked editor.

The code I'm using to get the value is:

$('<EditorID>').val();

There are two ways that I initiate getting the value though. One way is if they click a button. This works fine and the code above returns the correct value. The other way is if they hit enter. This is where I get the value along with the mask characters. So, for an editor with a mask of:

.InputMask("99999999999999")

If I type 1234 and hit enter, I get "1234__________".

I'm guessing this is because the editor box still has focus and those characters are still in the box, whereas when I click the button, the box loses focus and those mask characters are no longer there.

I'm going to have to remove the mask character from my returned value to fix my issue, but am wondering if this might be a possible future enhancement opportunity.

Thanks,
Tony

 

 

Parents
No Data
Reply
  • 24497
    posted

    Hi Tony,

    I recommend you to use member methods (or options) available for igEditor/igMaskEditor, but not pure jquery. The INPUT.val() may return different values for focus and not-focus states depending on promptChar, padChar and emptyChar. It will be probably similar to "allText".

    There is getValueByMode method, which returns value according to desired rules. It should cover all possible combinations of optional/required positions and literal characters. Please run following, fill up different positions in mask and check output.

    <script type="text/javascript">
     $(function () {
      $('#mask1').igEditor({
       type: 'mask',
       dataMode: 'rawtext',
       inputMask: '(000) 999-9999'
      });
      $('#getValues').click(function () {
       var str = 'value="' + $('#mask1').igEditor('value') + '"';
       str += '\noption="' + $('#mask1').igEditor('option', 'value') + '"';
       str += '\ntext="' + $('#mask1').igEditor('text') + '"';
       str += '\nrawText="' + $('#mask1').igEditor('getValueByMode', 'rawText') + '"';//or 0
       str += '\nrawTextWithRequiredPrompts="' + $('#mask1').igEditor('getValueByMode', 'rawTextWithRequiredPrompts') + '"';//or 1
       str += '\nrawTextWithAllPrompts="' + $('#mask1').igEditor('getValueByMode', 'rawTextWithAllPrompts') + '"';//or 2
       str += '\nrawTextWithLiterals="' + $('#mask1').igEditor('getValueByMode', 'rawTextWithLiterals') + '"';//or 3
       str += '\nrawTextWithRequiredPromptsAndLiterals="' + $('#mask1').igEditor('getValueByMode', 'rawTextWithRequiredPromptsAndLiterals') + '"';//or 4
       str += '\nallText="' + $('#mask1').igEditor('getValueByMode', 'allText') + '"';//or 5
       alert(str);
      });
     });
    </script>
    <input id="mask1" type="text" value="12345678" />
    <button id="getValues">Get values</button>

Children