使用内容可编辑元素的选择? [英] Use a select for content editable element?

问题描述

是否可以使用具有contenteditable属性的选择菜单?

Is it possible to bring in a select menu with a contenteditable attribute?

以下内容:

<p contenteditable="true" name="letter">a</p>

启用contenteditable后将成为选择选项:

would become a select option once contenteditable is enabled:

<select name="letter">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
</select>

推荐答案

首先，您需要根据元素是否具有contenteditable属性来选择元素:

First you need to be able to select an element based on whether or not it has the contenteditable attribute:

$('[contenteditable="true"]')

例如，

HTML:

For example,

HTML:

<div>
    <p contenteditable='true'>ajdsflkjasdlfkjasdlfjdklasfD</p>
</div>
<div>
    <p contenteditable='true'>oqewrujfzkljvladswjoaiewnlei</p>
</div>
<div>
    <p contenteditable='true'>2345rtsdghwregg342534tres34</p>
</div>
<div>
    <p contenteditable='true'>a234trey36y34ttgfttqerertuityt</p>
</div>
<div>
    <p contenteditable='true'>1234rgdfs563ju6tref43f5eyrew65htew</p>
</div>

JavaScript:

$(function() {
    $('[contenteditable="true"]').each(function() {
        var parent = $(this).parent(),
            text   = $(this).text(),
            select = function() {
                var returnstring = '';
                for (var i in text) {
                    returnstring += "<option value='" + text[i] + "'>" + text[i] + "</option>";
                }
                return "<select>" + returnstring + "</select>";
            }();
        $(this).empty();
        parent.append(select);
    });
});

这是 小提琴 的链接，因此您可以看到我在谈论.

Here is a link to the fiddle so you can see what I'm talking about.

这篇关于使用内容可编辑元素的选择?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！