添加“我输入字段，但应该隐藏

Adding "i" to input field, but should be hidden

本文关键字：隐藏 我输入字段 输入 字段 添加      更新时间：2023-09-26

我想在单击红色div时将" I "添加到输入字段，但是添加到输入字段的" I "不应该是可见的。如果点击绿色按钮，隐藏的"i"应该会被移除。

这是我的HTML直播:http://jsfiddle.net/mtYtW/60/

我的HTML: 

<div class="input string optional">
    <label for="company_navn" class="string optional">Name</label>
    <input type="text" size="50" name="company[navn]" maxlength="255" id="webhost_navn" class="string optional">
</div>
<div style="width:30px;height:30px;margin-top:10px;display:block;background:green;">
</div>
<div style="width:30px;height:30px;margin-top:10px;display:block;background:red;">
</div>

如何创建这个功能?

如果您想将数据与特定元素关联，我建议使用jQuery的.data()方法。看一下jQuery文档。这是一种更干净的实现目标的方式。

这是一个工作小提琴来帮助你开始。

编辑

根据您的问题的评论中列出的新要求，您可以像这样附加到表单提交事件:

$('#yourForm').submit(function() {
    if($('#webhost_navn').data('myData') == 'i')
    {
        var val = $('#webhost_navn').val();
        $('#webhost_navn').val('i' + val);
    }
});

注意:此代码依赖于my Fiddle中的原始代码。

听起来像是要将一些数据与输入字段关联起来，但不更改输入字段的值。为此，您可以使用data方法:

$(document).ready(function() {
    $('#redDiv').click(function() {
        $('#webhost_navn').data('myData', 'i');
    });
    $('#greenDiv').click(function() {
        $('#webhost_navn').data('myData', null);
    });
});

您需要在上面的示例中分别为redDiv和greenDiv的红色和绿色div添加id。要检索与输入相关联的数据，请执行以下操作:

var myData = $('#webhost_navn').data('myData'); // Will equal 'i' or null

API Ref: http://api.jquery.com/data

EDIT:将"i"值附加到输入的值后面:

var myData = $('#webhost_navn').data('myData'),
    val = $('#webhost_navn').val();
if (myData) {
    $('#webhost_navn').val(myData + val);
}

工作示例:http://jsfiddle.net/FishBasketGordo/e3yKu/

我在这里更新您的代码:http://jsfiddle.net/mtYtW/61/基本上，我给了你的红色/绿色按钮的id，并创建了一个点击事件来添加/删除内容。我还创建了一个css定义，将输入框的颜色设置为白色，这样你就看不到文本了。

<div class="input string optional"><label for="company_navn" class="string optional"> Name</label><input type="text" size="50" name="company[navn]" maxlength="255" id="webhost_navn" class="string optional"></div>
<div id='green' style="width:30px;height:30px;margin-top:10px;display:block;background:green;"></div>
<div id='red' style="width:30px;height:30px;margin-top:10px;display:block;background:red;"></div>
css: 

label {display:block;}
#webhost_navn{color:white};

js: 

$("#red").live("click",function()
{
    $("#webhost_navn").val("i");
});
$("#green").live("click",function()
 {
     $("#webhost_navn").val("");
 });

注意，如果目标是发布一个"i"，没有其他作为值(即没有用户输入)使用<input type='hidden' id=webhost_navn >和使用相同的jquery代码如上，而不需要css。

相关文章：