htmlinput框限制输入和提示（包括国际化）

前言

今天遇到了此问题&＃xff0c;写来记一下&＃xff0c;也供有需求的小伙伴借鉴。

1. 输入框提示信息且限制长度

<input name&＃61;"code" class&＃61;"111" type&＃61;"text" placeholder&＃61;"请输入长度小于25的字符" maxlength&＃61;"25" required>


① placeholder&＃61;“请输入长度小于25个字符” 提示语
② maxlength&＃61;“25” 长度限制

2. 提示语国际化配置

涉及到多国语言适配&＃xff0c;如下&＃xff1a;

2.1 在全局js里加入&＃xff1a;

<script th:inline&＃61;"Javascript">
var ctx &＃61; [[&＃64;{/}]];
var LANGUAGE_INFO_STORAGE_NAME &＃61; "static_language_info";
var DEFAULT_LANGUAGE &＃61; navigator.browserLanguage || navigator.language;function getLanguageInfo() {return $.smartpeak.cache.get(LANGUAGE_INFO_STORAGE_NAME, DEFAULT_LANGUAGE.replace("-", "_"));
}
var lang &＃61; getLanguageInfo();$(function () {...try {jQuery.i18n.properties({name: &＃39;strings&＃39;,path: ctx &＃43; &＃39;res/newui/i18n/&＃39;,mode: &＃39;map&＃39;,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类别&＃xff0c;看下面。

2.2 具体引入

<input name&＃61;"code" class&＃61;"111 language_placeholder" type&＃61;"text" placeholder&＃61;"Please_enter_characters_less_than_25_in_length" maxlength&＃61;"25" required>


直接在原有class属性里空格额外增加国际化配置的 language_placeholder&＃xff0c;正是我们上面js里的配置。

2.3 当然少不了properties

在你的项目web目录下&＃xff0c;新建&＃xff1a;

3个箭头指向的是英语、西班牙葡萄牙语、中文 配置文件&＃xff08;命名自定义&＃xff09;

• strings_en_US.properties&＃xff1a;

Please_enter_characters_less_than_25_in_length&＃61;please enter characters less than 25 in length


• strings_zh.properties&＃xff1a;

Please_enter_characters_less_than_25_in_length&＃61;\u8bf7\u8f93\u5165\u957f\u5ea6\u5c0f\u4e8e25\u7684\u5b57\u7b26


其他语言类似。等号左边每个配置文件都是一样的&＃xff0c;等号右边才是每种语言对应要显示的样式。

over~