Question

我有一个文本框，可以从用户那里获得多个电子邮件ID。并在工具提示中显示，但我需要在新行显示每封电子邮件（以逗号分隔）为此，需要检测逗号＆amp;添加新的行字符。

HTML

  <input type="text" id="email"> <div id="ttip"></div>

工具提示的jquery

$("#email").keyup(showTooltip);

var showTooltip = function(e) {
    var tooltip = $(this).val();
    if (tooltip == '') {
        hideTooltip();
    } else if (e.which == 188) {
        tooltip += "<br>";
        $("#ttip").fadeIn().html(tooltip);
    } else {
        $("#ttip").fadeIn().html(tooltip);
    }
}

因此，当我的工具提示显示在div中时，它没有检测到<br>并且它显示在同一行上。
我该如何解决？

Answer 1

尝试：

$("#email").keyup(showTooltip);

            var showTooltip=function(e){
            var tooltip=$(this).val();
                    if(tooltip ==''){
                            hideTooltip();
                    }else if(e.which == 188){
                           tooltip = tooltip.replace(/,/g,"<br />");
                            $("#ttip").fadeIn().html(tooltip);
                    }else{              
                            $("#ttip").fadeIn().html(tooltip);
                    }   
            }

Answer 2

您每次都要撤消之前的更改。在替换值之前，请不要检查是否输入了逗号。

var showTooltip = function(e) {
    var tooltip = $(this).val();
    if (tooltip == '') {
        hideTooltip();
    } else {
        tooltip = tooltip.replace(/,/g, '<br />');
        $("#ttip").fadeIn().html(tooltip);
    }
}
$("#email").keyup(showTooltip);

查看此处：http://jsfiddle.net/lnrb0b/NK65G/ （我已经注释掉hideTooltip()，因为我没有这个功能）

Answer 3

这样可行：http://jsfiddle.net/ZgmFw/4/

var showTooltip = function(e) {
    var tooltip = $(this).val();
    if (tooltip == '') {
        hideTooltip();
    } else {
        $("#ttip").html(tooltip.replace(/,/g, "<br />")).fadeIn();
    }
}


$("#email").keyup(showTooltip);

jquery：如何在逗号发生时向文本添加新行

3 个答案: