Question

所以我正在尝试创建一个可编辑的文本框，如果用户点击图像。文本框位于图像下方，当用户单击文本框时，它会保存。

这是我的HTML

 <div id = "folderlist">
 <a  href="linkgoeshere"<image  src="${resource(dir: 'images', file:  'folderimg.png')}" width="100px" height="100px"/>
                <textarea class="captionText" rows="1">${d.name}</textarea>
            </a>

的CSS

`#folderlist {

/*font-size: 0;*/
width: 1500px;
margin: 20px auto;
position: absolute;
top: 21%;
right: 8.1%;
text-align: center;
}

问题在于，当用户点击它重定向的textarea时，我将每个图像作为指向其他地方的链接。
每个textarea必须带有图标，以便我可以从<a>标签

移动它

**出于这个问题的目的，我只需要为该html页面保存，我可以自己处理实际的永久保存。

我只是希望用户能够点击图像，然后文本框允许用户编辑文本，然后当他们点击它时，它就像他们改变它一样保留（通过点击它应该调用一个javascript函数，我可以永久保存它。）

Answer 1

首先，我认为您不需要使用<ListView Name="ListViewSongs"> <ListView.ItemContainerStyle> <Style TargetType="ListViewItem"> <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter> </Style> </ListView.ItemContainerStyle> <ListView.ItemTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="120" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="150" /> </Grid.ColumnDefinitions> <TextBlock Grid.Column="0" Text="{Binding Artist}" /> <TextBlock Grid.Column="1" Text="{Binding ArtistName}" /> <TextBlock Grid.Column="2" Text="{Binding SongName}" /> </Grid> </DataTemplate> </ListView.ItemTemplate> </ListView>标记。只需使用Type[] funcParams = (d.GetType()).GenericTypeArguments;。

将a设置为onclick，直至获得点击，然后使用textarea在失去焦点时再次将其停用。

disabled

Answer 2

我为您的案例创建了JS小提琴代码。这是链接：https://jsfiddle.net/dhiviyad/b1oka3df/

＆＃13;

$(document).on('click touch', '#folderlist .captionText', function(e) {
  e.stopPropagation();
  e.preventDefault();
  console.log('clicking text');
});

$(document).on('click touch', '#folderlist #myImage', function(e) {
  e.stopPropagation();
  e.preventDefault();
  $('#folderlist .captionText')
    .removeAttr('readonly')
    .focus();
  console.log('clicking img');
});


$(document).on('blur', '#folderlist .captionText', function(e) {
  console.log('blurring text - please save me to server');
  $(this).attr('readonly', 'true')
  saveToServer($(this).val());
  //call function to save to server here
});

function saveToServer(updatedText) {
  console.log('Updated text to send to server', updatedText);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="folderlist">
  <a href="test.com">
    <image id='myImage' src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" width="100px" height="100px" />
    <textarea class="captionText" rows="1" readonly>d.name</textarea>
  </a>
</div>

＆＃13;

如何创建可编辑的文本框？

2 个答案: