超友好地限制域中的字符输入

大家好，才是真的好。最近两周好像和Notes应用程序杠上了，很喜欢分享一些有用的设计技巧，让大家高兴的是，今天也是——我们继续来分享一个在Notes客户机中很好用、也很友好的字符限制功能。

效果演示

在Notes的CS应用动态地提醒用户输入字符个数，也是用JS写的。我们可以先看看效果，比如Department字段，把光标挪到这个字段中，下面就会出现提示：

随着我们的输入，字符个数提示会动态地变化。

直到最后达到字符限制的个数，输不进去：

好了，如果你感兴趣的话，那么下面我们就来介绍如何实现这个功能。

如何实现

首先创建一个表单，而后创建一个按钮，不用取名字，主要是要隐藏起来，而后给一个公式@Command([RefreshHideFormulas])，如下图：

别忘了，给这个字段HTML属性中给于一个名称，如RefreshItButton，如下图：

接着创建一个字段，本例取名为CheckField，并隐藏起来，如下图：

接着在表单的JS Header中，选择Client的JavaScript，然后写如下JS代码：

代码具体如下：

var useClick;
var f = document.forms[0];

function textLimiter(inputName,counterName,charLimit) {
inputField = eval('f.' + inputName);
counterField = eval('f.' + counterName);

if (inputField.value.length > charLimit) { 
inputField.value = inputField.value.substring(0, charLimit);
}
else {
counterField.value = charLimit - inputField.value.length;
}
}

好了，接着我们创建要控制的字段，比如Subject，不需要隐藏（提示一下，建议在Subject字段前建一个字段，这个我们后面补充）：

在该需要被控制的字段onBlur事件中（在Client端运行的JavaScript），写如如下JS脚本：

f.CheckField.value = ‘’;
f.RefreshItButton.click();
clearInterval(useClick);

然后在该字段的OnFocus事件中写入下面代码（代码中的30即为控制最多字符输入为30个）：

var inputName= ‘subject’;
var counterName = ‘CounterField’;
var charLimit = 30;

f.CheckField.value = ‘subject’;
f.RefreshItButton.click();

useClick = setInterval(“textLimiter(’”+inputName+"’, ‘"+counterName+"’, “+charLimit+”)",100);

效果如下：

好了，再添加一个用显示字符个数提醒的字段，本例为CounterField，设置隐藏属性为CheckField != “subject”，如下图所示：

按我们前面的提醒，可以在Subject前面再创建一个字段，比如Date，什么都不用设置，可以给个默认值，也可以不给。

在Notes客户机中预览时，把光标置于Subject当中，则下面的字段会自动显示剩下可以输入的字符个数：

为了更加直观和美观，我们添加一下文字说明，并把CounterField字段变成可计算字段，如下图：

最后，我们再来预览一次，当我们把光标置于Subject或输入字符时，下面会动态地提示当前还可以输入多少个字符：

好了，今天我们的分享就到这里，相信对你来说，还是很有用的，对吧？请继续保持关注。

更多精彩内容请关注微信公众号“协作者”

原文地址：https://mp.weixin.qq.com/s/TAXg4JhqhUBkTAJ5N-dtuA