如何自动添加字符串“;http://'当用户通过jquery在文本框中输入时

How to auto add string "http://' when user input in the textbox by jquery

本文关键字:jquery 文本 用户 输入 字符串 添加 何自动 http      更新时间:2023-09-26

我想自动将http://预先设置为文本框的值。

例如,cateno.no应该变成http://cateno.no,但http://google.com应该保持不变。

这是HTML:

<input id="urlBanner" type ="text" style ="width:450px;" maxlenght="100" />

您可以绑定到inputchange事件并评估值:

$(document).ready(function () {
    $("#urlBanner").change(function() {
        if (!/^http:'/'//.test(this.value)) {
            this.value = "http://" + this.value;
        }
    });
});

示例:http://jsfiddle.net/andrewwhitaker/gnHLz/

或者,如果您不喜欢正则表达式,可以使用indexOf:

$(document).ready(function () {
    $("#urlBanner").change(function() {
        if (this.value.indexOf("http://") !== 0) {
            this.value = "http://" + this.value;
        }
    });
});

示例:http://jsfiddle.net/andrewwhitaker/fYRUW/

我会对Andrew Whitaker的正则表达式示例进行轻微修改,以考虑https URL,否则https://test.com将以http://开头,看起来像http://https://test.com

$(document).ready(function () {
    $("#urlBanner").change(function() {
        if (!/^https*:'/'//.test(this.value)) {
            this.value = "http://" + this.value;
        }
    });
});

处理一些事件,可能是change,如果当前值与正则表达式不匹配,则在字符串前加上前缀:

$(document).ready(function() {
    $('#urlBanner').bind('change', function() {
        var $this = $(this);
        if(!/^http:'/'//.test($this.val()) {
            $this.val('http://' + $this.val);
        }
    });
});
  jQuery.validator.addMethod("complete_url", function(val, elem, params) {
// if no url, don't do anything
if (val.length == 0) { return true; }
// if user has not entered http:// https:// or ftp:// assume they mean http://
if(!/^(https?|ftp):'/'//i.test(val)) {
    val = 'http://'+val; // set both the value
    $(elem).val(val); // also update the form element
}
else if(/^(https?|ftp):'/'//i.test(val)) { // set both the value
    $(elem).val(val); // also update the form element
}
// now check if valid url
return /^(https?|ftp):'/'/(((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&amp;''(')'*'+,;=]|:)*@)?((('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5])'.('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5])'.('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5])'.('d|[1-9]'d|1'd'd|2[0-4]'d|25[0-5]))|((([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])*([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])))'.)+(([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])*([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])))'.?)(:'d*)?)('/((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&amp;''(')'*'+,;=]|:|@)+('/(([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&amp;''(')'*'+,;=]|:|@)*)*)?)?('?((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&amp;''(')'*'+,;=]|:|@)|['uE000-'uF8FF]|'/|'?)*)?('#((([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(%['da-f]{2})|[!'$&amp;''(')'*'+,;=]|:|@)|'/|'?)*)?$/i.test(val);}, 'Please enter valid URL');