Javascript 如何使占位符可单击？

在我的网站上，我想创建一个带有占位符的输入字段，如“Password.Example:abcdef”，可以单击“abcdef”。如果用户点击“abcdef”，则输入值变为“abcdef”。请问我怎么做？如果有必要，我已经准备好使用jQuery

（显然，我不会对“密码”字段执行此操作，这只是一个示例）。

演示-

---

就像我说的，你可以用叠加元素来实现

演示：

标记

<input type="text">
<div class="placeholder">Name. Ex: <a href="#">John</a></div>

JavaScript

// position the div
var tbox = $('input[type="text"]'),
       pholder = $('.placeholder')

pholder
    .css({
        top: tbox.offset().top + 'px',
        left: tbox.offset().left + 'px',
        height: tbox.outerHeight() + 'px',
        width: tbox.outerWidth() + 'px',
    })
    .on('mousedown', 'a', function() {
        pholder.hide();
        var text = $(this).text();
        setTimeout(function() {
            tbox.val(text).focus();
        }, 50);
        return false;
    })
    .on('mousedown', function() {
        pholder.hide();
        setTimeout(function() {
            tbox.val('').focus();
        }, 50);
    });

tbox.on('blur', function() {
    if($(this).val() === '') pholder.show(); 
});

---

提示：在文本框上覆盖一个绝对定位的元素，其中包含您需要的文本/可点击的内容。请提供所需的html，并显示您尝试过的内容。在单击处理程序中设置

输入

值非常简单trivial@techfoobar是的，我认为这是个好主意。但是，如果我把新的div放在textarea上，我们就不能再输入text了。如果我把新的div放在textarea下面，我们就看不到div了。@Arnaud-当你在div（覆盖）上向下鼠标时，你应该隐藏div并将焦点设置到文本区域。如果单击div内的示例，则在textarea中设置其文本，隐藏div并将焦点设置为textarea。@Arnaud-检查我发布的答案。我相信这应该能解决问题。这不是我想要的。我正在寻找一个占位符，其中只有一部分文本是可点击的。

div.placeholder {
    position: absolute;
}

// position the div
var tbox = $('input[type="text"]'),
       pholder = $('.placeholder')

pholder
    .css({
        top: tbox.offset().top + 'px',
        left: tbox.offset().left + 'px',
        height: tbox.outerHeight() + 'px',
        width: tbox.outerWidth() + 'px',
    })
    .on('mousedown', 'a', function() {
        pholder.hide();
        var text = $(this).text();
        setTimeout(function() {
            tbox.val(text).focus();
        }, 50);
        return false;
    })
    .on('mousedown', function() {
        pholder.hide();
        setTimeout(function() {
            tbox.val('').focus();
        }, 50);
    });

tbox.on('blur', function() {
    if($(this).val() === '') pholder.show(); 
});