Question

我有一个HTML页面，其相应的.js文件中包含以下给定代码。我有一个textarea元素txtexamplereviewed，当我单击Alt + Shift + A按钮时，单击btnAddMicroElement的事件会被触发，它会向页面添加一个新的div，其中包含标签，文本输入和里面的按钮。此动态添加的div中的文本输入应具有在触发此事件之前在textarea txtexamplereviewed中选择的文本。为此，我必须将此文本传递给btnAddMicroElement的点击事件。我已经完成了如下所示，但它不起作用，我在文本输入中获取文本微元素而不是textarea中的选定文本。请帮我纠正我的代码。

$(document).ready(function(){        
  $("#btnAddMicroElement").click(function(microelement){
    alert("clicked");
    $("#divVerification").append("<div class='clsdivmicroelement'><label>Microelement</label><input type='text' class='clstxtmicroelement'/ value=microelement><input type='button' class='clsbtnmicroelmentadd' value='Add'/></div>"); 
        return false;
  });
});    

function getSelectedText(el) {
    var sel, range;
    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        return el.value.slice(el.selectionStart, el.selectionEnd);
    } else if (
            (sel = document.selection) &&
            sel.type == "Text" &&
            (range = sel.createRange()).parentElement() == el) {
         return range.text;
    }
    return "";
}

window.onload = function() {
  document.getElementById("txtexamplereviewed").onkeydown = function(e) {
    if(e.altKey && e.shiftKey && e.which==65){      
            $("#btnAddMicroElement").trigger("click",[getSelectedText(this)]);      
    }
  };
};

Answer 1

我对您的代码进行了一些更正。现在keydown活动效果更好。我用jQuery设置了keydown事件处理程序......你还在使用jQuery，所以尝试整体...

JSFIDDLE：http://jsfiddle.net/algorhythm/y99xytvn/2/

$(document).ready(function() {
    $("#btnAddMicroElement").click(function(event, microelement) {
        if (!isString(microelement)) { microelement = ''; } // be sure that microelement is a string
        $("#divVerification").append("<div class='clsdivmicroelement'><label>Microelement</label><input type='text' class='clstxtmicroelement'/ value=" +microelement +"><input type='button' class='clsbtnmicroelmentadd' value='Add'/></div>");
        return false;
    });

    $('#txtexamplereviewed').keydown(function(e) {
        if (e.altKey && e.shiftKey && e.which == 65) {
            e.preventDefault(); // don't insert the pressed 'A' into textarea
            $("#btnAddMicroElement").trigger("click", [getSelectedText(this)]);
        }
    });
});

// unchanged
function getSelectedText(el) {
    var sel, range;
    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        return el.value.slice(el.selectionStart, el.selectionEnd);
    } else if (
            (sel = document.selection) &&
            sel.type == "Text" &&
            (range = sel.createRange()).parentElement() == el) {
         return range.text;
    }
    return "";
}

function isString(str) {
    return typeof str == 'string' || str instanceof String;
}

注意：在我的Mac上点击ALT + SHIFT + A时，您会在文本框中输入以下字符：Å。为了防止这种情况，我在检测到快捷方式的e.preventDefault();子句中添加了行if。

更新：我添加了一个函数isString以确保微元素是一个字符串。当您点击标识为undefined的按钮时，它会修复在添加的文本框中写入btnAddMicroElement的错误。

Answer 2

你可以这样做：

$(document).ready(function(){        
  $("#btnAddMicroElement").click(function(event){
     alert("clicked");
     var txt = document.getElementById("txtexamplereviewed"); 
     content = getSelectedText(txt); // get the text here 
     $("#divVerification").append("<div class='clsdivmicroelement'><label>Microelement</label><input type='text' class='clstxtmicroelement'/ value=microelement><input type='button' class='clsbtnmicroelmentadd' value='Add'/></div>"); 
      return false;
  });
});
window.onload = function() {
  document.getElementById("txtexamplereviewed").onkeydown = function(e) {
    if(e.altKey && e.shiftKey && e.which==65){      
        $("#btnAddMicroElement").trigger("click");      
     }
   };
};

function getSelectedText(el) {
  var sel, range;
  if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
    return el.value.slice(el.selectionStart, el.selectionEnd);
  } else if (
        (sel = document.selection) &&
        sel.type == "Text" &&
        (range = sel.createRange()).parentElement() == el) {
     return range.text;
  }
  return "";
}

Answer 3

自定义参数作为第二个参数，所以我修改了一下你的代码：

 $("#btnAddMicroElement").click(function (microelement, text) {

    $("#divVerification").append("<div class='clsdivmicroelement'><label>Microelement</label><input type='text' class='clstxtmicroelement'/ value="+text+"><input type='button' class='clsbtnmicroelmentadd' value='Add'/></div>");
    return false;
});

如果您需要，请查看此fiddle。

传递参数以在jQuery中单击事件

3 个答案: