前言
今天遇到了此问题，写来记一下，也供有需求的小伙伴借鉴。
1. 输入框提示信息且限制长度
<input name="code" class="111" type="text" placeholder="请输入长度小于25的字符" maxlength="25" required>
① placeholder=“请输入长度小于25个字符” 提示语
② maxlength=“25” 长度限制
2. 提示语国际化配置
涉及到多国语言适配，如下：
2.1 在全局js里加入：
<script th:inline="javascript">
var ctx = [[@{/}]];
var LANGUAGE_INFO_STORAGE_NAME = "static_language_info";
var DEFAULT_LANGUAGE = navigator.browserLanguage || navigator.language;
function getLanguageInfo() {
return $.smartpeak.cache.get(LANGUAGE_INFO_STORAGE_NAME, DEFAULT_LANGUAGE.replace("-", "_"));
}
var lang = getLanguageInfo();
$(function () {
...
try {
jQuery.i18n.properties({
name: 'strings',
path: ctx + 'res/newui/i18n/',
mode: 'map',
language: lang,
callback: function () {
$(".language_label").each(function () {
$(this).html($.i18n.prop($(this).html()));
});
$(".language_placeholder").each(function () {
$(this).attr("placeholder", $.i18n.prop($(this).attr("placeholder")));
});
$(".language_title").each(function () {
$(this).attr("title", $.i18n.prop($(this).attr("title")));
});
$(".language_value").each(function () {
$(this).attr("value", $.i18n.prop($(this).attr("value")));
});
$(".language_select option").each(function () {
$(this).html($.i18n.prop($(this).html()));
});
}
})
} catch (err) {
console.log(err)
}
})
</script>
里面每一种类型在引用时对应的是class类别，看下面。
2.2 具体引入
<input name="code" class="111 language_placeholder" type="text" placeholder="Please_enter_characters_less_than_25_in_length" maxlength="25" required>
直接在原有class属性里空格额外增加国际化配置的 language_placeholder，正是我们上面js里的配置。
2.3 当然少不了properties
在你的项目web目录下，新建：
3个箭头指向的是英语、西班牙葡萄牙语、中文 配置文件（命名自定义）
- strings_en_US.properties：
Please_enter_characters_less_than_25_in_length=please enter characters less than 25 in length
- strings_zh.properties：
Please_enter_characters_less_than_25_in_length=\u8bf7\u8f93\u5165\u957f\u5ea6\u5c0f\u4e8e25\u7684\u5b57\u7b26
其他语言类似。等号左边每个配置文件都是一样的，等号右边才是每种语言对应要显示的样式。
over~
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/157212.html
