内容可编辑段落上的 Keydown 事件答案

【问题标题】：Keydown event on contenteditable paragraph内容可编辑段落上的 Keydown 事件
【发布时间】：2014-10-07 10:19:53
【问题描述】：

我已经使用具有内容可编辑属性“true”的段落代替输入来实现完美的 UI。我正在尝试将输入键更改为“密码”类型，因此尝试在段落上实现 keydown 事件，但面临一些问题.

我的 HTML 代码是：

<div id="usernameInput">
<p id="passwordInput" contenteditable="true" style="width: 100%;text-shadow: none;font-weight: normal; color: #ffffff;" data-ph="Password"></p>
</div>

我的 jquery 代码是：

$('#passwordInput').keydown(function(e){
        if (e.keyCode > 65 && e.keyCode < 90) {
            //code
            $(this).val($(this).val()+'.');
            e.preventDefault();
        }
});

但上面的代码不起作用。我什至无法输入密钥。然后我更改“.val " 到 "文本"。

修改后的代码是她：

$('#passwordInput').keydown(function(e){
        if (e.keyCode > 48 && e.keyCode < 90 && e.keyCode != 8) {
            //code
            $('#passwordInput').text($('#passwordInput').text()+'.');
            e.preventDefault();
        }
});

上面的代码工作正常，但我的光标向相反的方向移动。请帮我实现我输入的输入文本是密码类型。

【问题讨论】：

如果你想让paragraph被视为password，你为什么要使用它
你能不能弄一下/
嗨 Kyojimaru，我用 div 和 label 尝试了同样的事情。但遇到了同样的问题。我试图让输入框透明但那东西甚至不起作用。

标签： jquery contenteditable keydown

【解决方案1】：

问题似乎是您更改内容后地毯一直缩回到起点。

你的任务是将carret移到尽头。最省心的方法是模拟“向下箭头”按键。

var x = jQuery.Event("keypress");
x.which = 40;
x.keyCode = 40;
$("#passwordInput").trigger(x);

在e.preventDefault();之前插入这个

这显然不是最好的方法，但确实有效。

【讨论】：