目前我正在制作一个日程安排应用程序。在此应用程序中,我们希望确保用户能够非常快速地插入时间。这是我的计划(请参阅下面的 JSfiddle 链接):
我希望我的用户单击一个空表格单元格,然后会出现一个文本字段,用户可以填写 2 个时间标记,一个从开始,一个直到结束。用户按下 Enter 键后,时间将作为 div 保存在与文本字段出现的位置相同的位置。正如您在我的 fiddle 中看到的那样,这部分已经开始工作:
https://jsfiddle.net/rhantink/jm294oLk/3/
var tableFunctions = {
"createTimeBox": function () {
var timeBox = document.createElement("input");
$(timeBox).addClass("timeBox");
$(timeBox).attr('type', 'text');
$(timeBox).keypress(function (e) {
if (e.which == 13) {
var timeEntry = tableFunctions.createTimeEntry($(this).val());
$(".timeBox").replaceWith(timeEntry);
console.log(this);
}
});
return timeBox;
},
"createTimeEntry": function (textEntry) {
var timeEntry = document.createElement("div");
$(timeEntry).addClass("timeEntry");
$(timeEntry).text(textEntry);
return timeEntry;
}
}
var scheduler = {
"Applicatie": 'HRM2.0',
"init": function () {
console.log('Init');
$(".day").click(function () {
$('.timeBox').remove();
var timeBox = tableFunctions.createTimeBox();
$(this).append(timeBox);
$(timeBox).focus();
})
}
}
$(document).ready(
scheduler.init()
)
但是...用户需要能够输入“12-16”或“1200-1600”,然后按 Enter 键。我想使用 javascript 进行翻译,使 div 中的时间显示为“12:00 - 16:00”。后来我还希望他们输入“9-17c”,其中“c”代表类(class),这意味着他们在某些类(class)中使用了该时间窗口。 我的问题是: 有没有任何 javascript 框架可以让这变得更容易,或者有人可以为我指明开发这样的东西的正确方向吗?
也请随意对我的编码发表评论。
谢谢,
罗伯特
最佳答案
您应该使用Regular Expressions 。您可以测试用户使用特定模式编写的内容,如果匹配,您就可以进行翻译。
例如测试“12-16”字符串:
if(/([0-9]{2})-([0-9]{2})/.test($('#inputID').val()))
//do your thing
这是一个小fiddle关于正则表达式。
关于Javascript:短时间表示法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31321094/