Javascript 如何在单击图像时清除输入字段？

我正在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>

试试这个：

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

试试这个：

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

试着跟随

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

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

试着跟随

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

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

---

您不必使用锚定，只需在图像本身上侦听单击事件，如下所示：

<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>

从可访问性的角度来看，控制表单字段的可单击图像不是一种好的做法，但至少您不必担心锚定会失效。如果要提高可访问性，可能需要使用按钮元素，并使用背景图像样式，例如：

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

---

funky函数{}；notation立即执行脚本，但不会将创建的变量image、inputField和clickHandler泄漏到全局范围。这也是一种最佳做法，可以防止脚本干扰页面上的其他代码。

您可以只听图像本身上的单击事件，而不是使用锚，如下所示：

<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>

从可访问性的角度来看，控制表单字段的可单击图像不是一种好的做法，但至少您不必担心锚定会失效。如果要提高可访问性，可能需要使用按钮元素，并使用背景图像样式，例如：

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

---

funky函数{}；notation立即执行脚本，但不会将创建的变量image、inputField和clickHandler泄漏到全局范围。这也是一个最佳实践，可以防止脚本干扰页面上的其他代码。

您可以在javascript中轻松实现这一点

HTML代码

下面是指向JSFIDLE的链接--

---

希望它能帮助你

在javascript中，您可以非常轻松地做到这一点

HTML代码

下面是指向JSFIDLE的链接--

---

希望它能帮助你

document.getElementByIdinput.value=，并在clearField中将双引号更改为single。。。。位。您没有将第二个参数传递给clearField^^^您必须获取元素，并且不传递值，因此这将始终是未定义的，并且条件将始终失败。是否假定使用任何值清除输入，或者仅当它具有defaulf值？document.getElementByDidinPut.value=，并在clearField中将双引号改为单引号。。。。位。您没有将第二个参数传递给clearField^^^您必须获取元素，并且不传递值，因此这将始终是未定义的，并且条件将始终失败。是否假定使用任何值清除输入，或者仅当它具有defaulf值？