如何将多个值输入 input(textarea) 字段？

Question

我想制作建议文本，用户可以点击并在标签中创建一个句子。如果我有像"my cat is"、"my dog is"和"awesome"[=这样的句子22=]，用户可以点击它们并造出像这样的句子："my dog is awesome" 或 "my cat is awesome"，具体取决于哪个按钮用户首先点击。但是按钮中的文字较长（如句子）。

我还没有代码，因为我不知道从哪里开始。我只有一张图片来证明我的想法：

Answer 1

首先，可以在这里找到一个可用的 jsFiddle：http://jsfiddle.net/k3y9fa1v/

你可以这样制作按钮：

<button>My dog is </button>
<button>My cat is </button>
<button>awesome </button>

然后创建文本区域：

<textarea id='my-area'></textarea>

现在要与这些交互，请使用 JQuery 创建一个 onClick 事件处理程序：

// Create a listener that is fired when any button is clicked
$('button').click(function() {
    // Get the text that is inside the button
    var text = $(this).text();

    // Get the current content of the textarea
    var content = $('#my-area').val();

    // Add the text to the textarea
    $('#my-area').val(content + text);
});

要插入的附加代码 links
如果我们想插入 links，而不在按钮本身中放置 link 元素，我们可以使用 data 属性，它允许我们在元素上存储任意数据，让 jQuery CSS 与之互动。

对于初学者，我们将此按钮添加到 HTML 代码中：

// The data-type will be used in our jQuery code to determine that this
// button should be interpreted as a link
// data-link-to provides the URL of the link
<button data-type='link' data-link-to='http://google.com'>google link</button>

注意数据属性可以有任何你想要的名字（所以data-link-to不是一个特殊的名字，只是我编的）。这个数据属性真的很有用。您的情况的更多示例可能是 data-capital-first（始终将第一个字母大写，data-capital-word（始终将每个单词大写）等...这些示例可能看起来很愚蠢，因为您可以将字符串放入已经具有正确大写字符的按钮。但是，如果您要为此编写更复杂的代码（检测句子的开头以便添加大写字母，这些可能会有用）。

您可以使用普通 CSS 通过以下选择器定位此元素：

[data-type='link'] {
    background-color:rgb(110, 177, 252);
}

有关选择器及其浏览器兼容性的更多信息，请参阅 this link。

我修改了上面的 jQuery 以使用我们添加的新按钮。 jQuery有一个非常有用的内置函数.data()，它允许我们获取元素的特定数据属性。

$('button').click(function() {
    // Get the text that is inside the button
    var text = $(this).text();

    // Get the data-type attribute value
    var type = $(this).data('type');

    // Get the current content of the textarea
    var content = $('#my-area').val();

    // Check whether to add the text normally or add a link
    if (type == 'link') {
        // Retrieve the link address from the button and create the anchor text
        var link_ref = $(this).data('link-to');

        // Alter the text variable to be surrounded by tha anchor tag
        // with its specified href
        text = '<a href="' + link_ref + '">' + text + '</a>';
    }

    // Set the value of the textarea to the new value
    $('#my-area').val(content + text);
});

如何将多个值输入 input(textarea) 字段？

How to input multiple values into input(textarea) field?

html

javascript

tags

jquery

input