在jquery中将输入转换为链接

时间:2012-06-22 16:33:14

标签: javascript jquery jquery-ui

目前脚本的确如此:

  1. 点击链接,通过输入可见
  2. 编辑链接
  3. 通过输入可见
  4. ,在链接编辑链接之前单击下一个/

    我希望当您在链接上单击一次不要编辑但在新窗口中打开页面时,以及单击双击进行编辑时。

    这是脚本:

    jsfiddle - CODE

2 个答案:

答案 0 :(得分:3)

http://jsfiddle.net/jaspermogg/pFyNY/1/ - 您可以双击要编辑的div,或单击要打开的链接。你想要的是什么?

$('.a0').dblclick(function(e){
    e.preventDefault();
    $(this).parent().find('input').val($(this).find('a').text()).show().focus();
    $(this).hide();
})

$('#url0, #url1').each(
    function(index, element){
        $(element).blur(function(){
            $(this).hide().prev().show().find('a').html(this.value);
    })
    }    
);

这是一个jsFiddle,它将a的href更改为你编辑它的值,以防万一你正在尝试下一步:-) {{ 3}}

这是执行你想要的事情的jsFiddle - http://jsfiddle.net/jaspermogg/pFyNY/2/

JS -

$('.a0 a').click(function(){

    var href = $(this).attr('href');

    // Redirect only after 500 milliseconds (CHANGE THE 500 IN THE CODE TO DETERMINE HOW LONG THE USER GETS TO DBLCLICK)
    if (!$(this).data('timer')) {
       $(this).data('timer', setTimeout(function () {
          window.location = href;
       }, 500));
    }
    return false; // Prevent default action (redirecting)
});

$('.a0').dblclick(function(){
    clearTimeout($(this).find('a').data('timer'));
    $(this).find('a').data('timer', null);

    $(this).parent().find('input').val($(this).find('a').text()).show().focus();
    $(this).hide();
})

$('#url0, #url1').each(
    function(index, element){
        $(element).blur(function(){
            $(this).hide().prev().show().find('a').html(this.value);
    })
    }    
);

http://jsfiddle.net/jaspermogg/pFyNY/5/启发

答案 1 :(得分:0)

使用target="_blank"属性在新页面中打开链接。

<a target="_blank" href="dsad.cas">dsad.cas</a>

使用jquery的dblclick函数编辑链接

$('.a0').dblclick(function(e){
    e.preventDefault();
    $(this).parent().find('input').val($(this).find('a').text()).show().focus();
    $(this).hide();
})

$('#url0, #url1').each(
    function(index, element){
        $(element).blur(function(){
            $(this).hide().prev().show().find('a').html(this.value);
    })
    }    
);
​

以下是Demo