Question

我在foreach循环中创建一个表单。我真正想要的是......如何在点击图像时清除特定输入字段的值。以下是内部循环的代码。它有更多的表单字段。但我想清除一个特定的输入字段，因为我从数据库中获取数据，进行更改然后再次保存。

<a onclick="clearField("<?php echo "field_id".$language["language_id"]; ?>")" 
  href="javascript:noAction();"><img src="view/image/delete.png">
</a>

<input type="text" 
  id="<?php echo 'field_id'.$language['language_id']; ?>" 
  name="file_name[<?php echo $language['language_id']; ?>]" 
  value="<?php echo isset($document_description[$language['language_id']]) ? $document_description[$language['language_id']]['file'] : ''; ?>" 
  readonly="readonly"/>

以下是用于上述功能的javascript -

<script>
function clearField(input,val) {
      if(input.value == val)
         input.value="";
};
</script>

已编辑： - 以下声明还有一个问题 - 本声明中使用的所有引号都不合适。我的意思是说，由于某些缺失或一些额外的引号，代码不会被解析。所以请告诉我如何纠正这个问题。

<a onclick="clearField("<?php echo "field_id".$language["language_id"]; ?>")" 
  href="javascript:noAction();"><img src="view/image/delete.png">
</a>

Answer 1

尝试以下

<img src="view/image/delete.png" onclick="clearInput();">

<script>
function clearInput(){
document.getElementById('input_id').value = '';
}
</script>

Answer 2

您可以直接在图像上监听点击事件，而不是使用锚点，如下所示：

<img id="clickable_image" src="delete.png" alt="Clear input text" />

<input id="the_input_to_clear" ... other attribs here ... />

<script>

(function(){
    var image = document.getElementById('clickable_image'),
        inputField = document.getElementById('the_input_to_clear'),
        clickHandler = function() {
            inputField.value = '';
        };
    if (image.addEventListener) {
        // this attaches the event for most browsers
        image.addEventListener("click", clickHandler, false);
    } else {
        // this attaches the event for IE...
        image.attachEvent("onclick", clickHandler);
    }
})();

</script>

从辅助功能的角度来看，控制表单字段的可点击图像不是一个好习惯，但至少你不必担心一个无处可归的锚点。如果您想改善辅助功能，可以使用按钮元素，并使用背景图像设置样式，例如：http://jsfiddle.net/3vPpt/3/

我的示例中的Javascript动态地将click事件附加到图像，而不是在元素的onclick属性中指定函数。这是为了将表示与行为逻辑分开，被认为是最佳实践。

时髦（function（）{}）（）;表示法立即执行脚本，但不会将创建的变量（image，inputField，clickHandler）泄漏到全局范围中。这也是最佳做法，可以防止您的脚本干扰页面上的其他代码。

Answer 3

您可以在javascript中轻松完成此操作

HTML代码

<img src="http://www.mricons.com/store/png/45804_11386_128_button_cancel_icon.png" height="35" width="35" onclick ="change()" />
<input type="text" name="name" value="name" id="ghd" />

JAVASCRIPT代码

function change(){
    var ab = document.getElementById('ghd').value;
    document.getElementById('ghd').value = "";
    $('#ghd').val('dsds');
}

以下是jsfiddle的链接---

http://jsfiddle.net/nnRV5/

希望它可以帮到你!!

Answer 4

试试这个：

<script>
  function clearField(input,val) {
  if(document.getElementById(input).value == val){
     document.getElementById(input).value = '';//This will clear the field
 }
</script>

如何清除图像的输入字段？

4 个答案: