OSS で利用できる機能
エディター - マスク エディター
このサンプルは、dataMode オプションでサポートされている各値の違いを紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
送信した値:
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<style>
#container {
width: 70%;
border: 1px solid #ccc;
box-sizing: border-box;
padding: 20px;
}
.p {
margin-top: 5px;
}
#igMaskEditorsContainer {
float: left;
}
.group-fields {
margin-bottom: 10px;
}
.group-fields label {
display: block;
line-height: 18px;
}
.group-fields .ui-igedit-container {
width: 250px;
}
#ValuesContainer {
float: right;
width: 50%;
}
#ValuesContainer.p {
font-size: 16px;
}
#container h4 {
font-size: 16px;
margin-bottom: 10px;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width:960px) {
#container {
width: 80%;
}
}
@media screen and (max-width:840px) {
#container {
width: 100%;
}
}
@media screen and (max-width:690px) {
#igMaskEditorsContainer, #ValuesContainer {
float: none;
}
#ValuesContainer {
margin-top: 20px;
width: auto;
}
}
@media screen and (max-width:365px) {
.group-fields .ui-igedit-container {
width: 200px;
}
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<div id="container" class="clearfix">
<div id="igMaskEditorsContainer">
<form id="form" action="javascript:console.log('送信');">
<div class="group-fields">
<label>RAW テキスト:</label>
<div id="msk1"></div>
</div>
<div class="group-fields">
<label>必要なプロンプトを持つ RAW テキスト:</label>
<div id="msk2"></div>
</div>
<div class="group-fields">
<label>すべてのプロンプトを持つ RAW テキスト:</label>
<div id="msk3"></div>
</div>
<div class="group-fields">
<label>リテラルを持つ RAW テキスト:</label>
<div id="msk4"></div>
</div>
<div class="group-fields">
<label>必要なプロンプトおよびリテラルを持つ RAW テキスト:</label>
<div id="msk5"></div>
</div>
<div class="group-fields">
<label>すべてのテキスト (デフォルト値):</label>
<div id="msk6"></div>
</div>
<input type="submit" id="submitBtn" value="送信" />
</form>
</div>
<div id="ValuesContainer">
<h4>送信した値:</h4>
<div class="divHeight">
<p class="pStyle" id="results"></p>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var listData = ["Oregon", "Nevada", "California", "Colorado", "Grorgia", "Virginia", "Arizona", "Texas"];
$('#msk1').igMaskEditor({
inputMask: 'AaaL/aa',
dataMode: 'rawText'
});
$('#msk2').igMaskEditor({
inputMask: 'AaaL/aa',
dataMode: 'rawTextWithRequiredPrompts'
});
$('#msk3').igMaskEditor({
inputMask: 'AaaL/aa',
dataMode: 'rawTextWithAllPrompts'
});
$('#msk4').igMaskEditor({
inputMask: 'AaaL/aa',
dataMode: 'rawTextWithLiterals'
});
$('#msk5').igMaskEditor({
inputMask: 'AaaL/aa',
dataMode: 'rawTextWithRequiredPromptsAndLiterals'
});
$('#msk6').igMaskEditor({
inputMask: 'AaaL/aa',
dataMode: 'allText'
});
$("#form").submit(function (event) {
$('.p').remove();
var submittedValues = [];
submittedValues.push($("#msk1").igMaskEditor("value"));
submittedValues.push($("#msk2").igMaskEditor("value"));
submittedValues.push($("#msk3").igMaskEditor("value"));
submittedValues.push($("#msk4").igMaskEditor("value"));
submittedValues.push($("#msk5").igMaskEditor("value"));
submittedValues.push($("#msk6").igMaskEditor("value"));
var headers = $('.group-fields label');
for (var i = 0 ; i < submittedValues.length; i++) {
$("#results").append("<p class='p'><span class='header'>" + headers[i].textContent + "</span> <b>" + submittedValues[i] + "</b></p>");
}
});
});
</script>
</body>
</html>