在“”之后插入文本;这个“;使用javascript输入元素

Insert text after "this" input-element with javascript?

本文关键字：javascript 输入 元素 使用 这个 之后 插入文本      更新时间：2023-09-26

代码：

<input type="text" onkeydown="
  if (event.keyCode == 13) { HERE, ECHO "OK" RIGHT AFTER THIS INPUT ELEMENT }
">

这是否可以在不将ID或名称放在该元素上的情况下实现？或者不将其封装在可识别的div中？

为了澄清，这应该是按下事件键代码后的结果html：

<input type="text" onkeydown="
  if (event.keyCode == 13) { HERE, ECHO "OK" RIGHT AFTER THIS INPUT ELEMENT }
">OK

如果您想使用jQuery，可以执行以下操作：

HTML

<input name="ok" type="text" id="showOK" />

JAVASCRIPT

$("#showOK").keypress(function() {
  if (event.keyCode == 13){
     $("<p>OK</p>").insertAfter("#showOK");
  }
});

不使用ID

<input type="text" onkeydown="if (event.keyCode == 13) { $('<p>OK</p>').insertAfter(this);}">

根据您的要求并尝试保持您的风格，您可以使用insertAdjacentHTMLDOM元素方法在input元素后面添加一个文本。

<input type="text" onkeydown="
  if (event.keyCode == 13) { this.insertAdjacentHTML('afterend', 'OK');}
">

参见演示

我在这里使用了混合答案。首先，我必须创建一个新的var：

var that=this；

否则javascript无法找到"this"。

然后使用jQUery方法：

$('<span>OK</span>').insertAfter(that);

结果：

<input type="text" onkeydown="
  if (event.keyCode == 13) { var that = this; $('<span>OK</span>').insertAfter(that); }
">

好的，首先不要使用内联js。但为了回答你的问题，

<input type="text" onkeydown="
    if (window.event.keyCode == 13) { this.outerHTML = this.outerHTML + 'Ok'; } "/>

DEMO

试试这个：

<input type="text" onkeydown="(function(event){
    var input = event.target;
    if(event.keyCode == 13){
      input.outerHTML += 'OK';
    }
  })(window.event);" />

演示。

<input type="text" onkeydown="ok(this, event)"/>

function ok(el, event) {
    var _ok = document.createElement('span');
    _ok.textContent = 'ok';
    if (event.which == 13) {
        el.parentNode.insertBefore(_ok, el.nextSibling)
    }
}

试试这个：

<input type="text" onkeydown="
if (event.keyCode == 13) { this.parentNode.insertBefore(document.createTextNode('OK'), this.nextElementSibling); }
">

它将在输入后直接添加一个文本节点（不创建任何span或div）。

相关文章：