如何使占位符可点击？ [关闭]答案

【问题标题】：How to make a placeholder clickable? [closed]如何使占位符可点击？ [关闭]
【发布时间】：2014-12-21 17:40:48
【问题描述】：

在我的网站上，我想创建一个带有占位符的输入字段，例如“密码。示例：abcdef”，其中“abcdef”是可点击的。如果用户点击“abcdef”，则输入值变为“abcdef”。请问我该怎么做？如果有必要，我已经准备好使用 jQuery。

（显然，我不会为“密码”字段这样做，这只是一个示例）。

【问题讨论】：

提示：用一个绝对定位的元素覆盖你的文本框，其中包含你需要的文本/可点击的东西。
请提供预期的 html 并显示您尝试过的内容。在点击处理程序中设置 input 值相当简单
@techfoobar 是的，我认为这是个好主意。但是，如果我将新的 div 放在 textarea 上，我们就不能再输入文本了。如果我将新的 div 放在 textarea 下，我们就看不到 div...
@Arnaud - 当您在 div（覆盖）上按下鼠标时，您应该隐藏 div 并将焦点设置到文本区域。如果单击 div 内的示例，则将其文本设置在 textarea 中，隐藏 div 并将焦点设置到 textarea。
@Arnaud - 检查我发布的答案。我相信应该可以解决它。

标签： javascript jquery html input placeholder

【解决方案1】：

就像我说的，您可以使用覆盖元素来做到这一点。

演示： http://jsfiddle.net/jt05w77x/3/

标记

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

CSS

div.placeholder {
    position: absolute;
}

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(); 
});

【讨论】：

【解决方案2】：

演示 - http://jsfiddle.net/victor_007/rtgmr68L/

$('#val').on('focus', function () {
    val = $(this).attr('placeholder')
    $(this).attr('value', val)
})

【讨论】：

这不是我想要的。我正在寻找一个占位符，其中只有部分文本是可点击的。