Question

在我的网站上，我想创建一个带有占位符的输入字段，例如＆＃34;密码。例如：abcdef＆＃34;，＆＃34; abcdef＆＃34;可点击。如果用户点击＆＃34; abcdef＆＃34;，则输入值将更改为＆＃34; abcdef＆＃34;。我该怎么办？如果有必要，我准备使用jQuery。

（显然，对于＆＃34;密码＆＃34;字段，我不打算这样做，这只是一个例子）。

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

Answer 2

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

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

如何使占位符可点击？

2 个答案: