1

我有一个简单的表格，用户可以输入“推文”。我在幕后使用了一些 javascript 来控制输入 url 时会发生什么。

如果输入了一个 url，例如 test.com，则会出现一个新的输入字段。

如果输入了存储在数组中的 url，它将和新的输入字段以及一个选择选项一起输入。

这是我的javascript：

var test = ["test1.com", "test2.com", "test3.com"];
$('#tweet_text_ga').hide();
$('#custom_alias').hide();
$('#tweet_campaign').hide();
$('#tweet_text').keydown(function () {
    var val = this.value;

    if (/\.[a-zA-Z]{2,3}/ig.test(val)) {
        $('#custom_alias').show();
    } else {
        $('#custom_alias').hide();
    }

    if ($.inArray(val, test) !== -1) {
        $('#tweet_campaign').show();
    } else {
        $('#tweet_campaign').hide();
    }
});

如果只输入一个 url，它就可以正常工作。但是，一旦您添加更多文本，它就会忽略 url 是否在数组中，并删除选择选项。我不太确定如何更好地解释这一点，所以我设置了一个小提琴来说明我的意思。

我希望有人理解并能指出我正确的方向

小提琴

4

5 回答 5

1

那是因为您正在检查整个输入是否在数组中：if ($.inArray(val, test) !== -1)。您需要使用正则表达式从输入中检索 URL 并进行检查。

编写一个检索任何 URL 的正则表达式，获取该 URL 并检查它是否是您的幸运之一：

var urlsInInput = /[a-z0-9]+\.[a-zA-Z]{2,3}/ig.exec(val);
if (urlsInInput.length == 1 && $.inArray(urlsInInput[0], test) !== -1) {

代替

if ($.inArray(val, test) !== -1) {

小提琴

于 2013-10-22T13:09:23.113 回答
0

你的有问题，$.isArray(val, test)你使用的价值是整个价值。不确定你的目的，所以写一个这样的代码。希望它会有所帮助。

http://jsfiddle.net/Sheldon_w/KLuK8/

var test = ["test1.com", "test2.com", "test3.com"];

var urlReg = /[^\s]+\.[a-zA-Z]{2,3}/ig;
$('#tweet_text_ga').hide();
$('#custom_alias').hide();
$('#tweet_campaign').hide();
$('#tweet_text').keydown(function () {
    var val = this.value;

    var matchedUrls = [];
    val.replace(urlReg, function (matched) {
        matchedUrls.push(matched);
    });

    if (matchedUrls.length > 0) {
        $('#custom_alias').show();
    } else {
        $('#custom_alias').hide();
    }

    $(matchedUrls).each(function (idx, url) {
        if ($.inArray(url, test) !== -1) {
            $('#tweet_campaign').show();
            return false;
        } else {
            $('#tweet_campaign').hide();
        }
    });

});
于 2013-10-22T13:42:33.673 回答
0

活动字段再次开始消失的原因是您将输入的整个值与数组进行比较。如果您只是找到所有域匹配项，然后将它们与您的数组进行比较，它应该可以工作。

像这样：

var test = ["test1.com", "test2.com", "test3.com"];

$('#tweet_text_ga').hide();
$('#custom_alias').hide();
$('#tweet_campaign').hide();

$('#tweet_text').keyup(function () {

    var alias    = false;
    var campaign = false;

    var domain = /([a-z0-9]+(:?[\-\.]{1}[a-z0-9]+)*\.[a-z]{2,6})/ig;
    var val    = this.value;
    var match  = val.match(domain);

    if (match) {
        alias = true;
        match.forEach(function(e) {
            campaign = campaign || ($.inArray(e, test) !== -1);
        });
    }

    if (alias === true) {
        $('#custom_alias').show();
    } else {
        $('#custom_alias').hide();
    }

    if (campaign === true) {
        $('#tweet_campaign').show();

    } else {
        $('#tweet_campaign').hide();
    }

});
于 2013-10-22T13:37:40.290 回答
0

@siledh 说了什么。这是使用当前测试数组的方法

var reg = new RexExp(test.join('|').replace(/\./ig, "\\."), 'ig')
if( reg.test(val) ) {
    $('#tweet_campaign').show();
} else {
    $('#tweet_campaign').hide();
}
于 2013-10-22T13:23:57.970 回答
0

这是我处理第一个网址的版本

Live Demo

$('#tweet_text').keydown(function () {
    var val = this.value;
    var urls = val.match(/[a-z0-9]+\.[a-zA-Z]{2,}/ig);
    var alias = (urls && urls.length>0) 
    $('#custom_alias').toggle(alias);

    var tweet = urls && urls.length>0 && $.inArray(urls[0], test) !== -1;
    $('#tweet_campaign').toggle(tweet);
});
于 2013-10-22T13:22:59.867 回答