在 contenteditable div 中使用用户输入设置元素不透明度答案

【问题标题】：set element opacity with user input in contenteditable div在 contenteditable div 中使用用户输入设置元素不透明度
【发布时间】：2014-08-08 16:24:55
【问题描述】：

我有一个 contenteditable div，我希望用户能够通过输入数字来设置另一个 div 的不透明度。

http://jsfiddle.net/w21q35tw/

$('#btn').click(function(){
    $('#d').css("opacity", "val('"+$("#set").html()+"')"); //sets opacity - doesn't work
    $('#set').html(val('"+$("#set").html()+"')); //input stays as editable text - works
});

我对 url 输入没有任何问题，但在这种情况下我没有成功使用 val 或 attr。我想我无法从 html 中获取 val / attr。

如何解决？

【问题讨论】：

#d 是内容可编辑的 div 而#set 是文本框？如果#set 是一个文本框，你不应该改用.val() 吗？
这个神秘的val()函数你还在用什么？另外，点击功能的最后一行是什么？

标签： javascript jquery css user-input contenteditable

【解决方案1】：

我更新了你的小提琴，这是正确的代码：http://jsfiddle.net/MeBeiM/w21q35tw/2/

我还添加了一个检查：如果用户输入错误（例如'cat'或-3），那么它会提示“错误值！”，这是 JavaScript 代码：

$('#btn').click(function () {
    var opacity = +$('#set').text();
    if ((opacity === 0 || opacity > 0) && opacity <= 1) {
        $('#d').css("opacity", opacity);
        $('#set').html('');
    } else {
        alert('Wrong value!');
    }
});

【讨论】：

【解决方案2】：

简单修复：

$('#btn').click(function(){
    $('#d').css("opacity", $("#set").text() / 100);
    $('#set').val('"+$("#set").html()+"');
});

演示：http://jsfiddle.net/w21q35tw/1/（在方框中输入 20 以获得 20% 的不透明度）

【讨论】：

正是我需要的，谢谢。我还认为输入 50 比输入 0.5 更好，所以你的答案很到位。只要网站允许，我就会选择你的答案。

【解决方案3】：

试试

$('#btn').click(function(){
    $('#d').css("opacity", $("#set").text());
    $('#set').html(val('"+$("#set").html()+"'));
});

希望对你有帮助

【讨论】：

【解决方案4】：

您的 contenteditable <div> 不是输入表单，因此它没有 val()。而是使用属性 .text() 来获取 innerHTML 值。

改变

$('#d').css("opacity", "val('"+$("#set").html()+"')");

收件人

$('#d').css("opacity", $("#set").text());

【讨论】：

【解决方案5】：

这是工作的fiddle。您在更改 CSS 部分时犯了错误：

使用 .text() 而不是 .val()，因为它是 CONTENTEDITABLE div。
其次，您将引号放在错误的位置。

【讨论】：

【解决方案6】：

你的 JS 是错误的。你需要这个：

$('#d').css("opacity", $("#set").html());

【讨论】：