如何使用输入框用叉清除输入的文字?

Question

 <td width="12%"><input  style="font-size:10px; "class="form-control" placeholder="输入完整订单号" ng-model="vm.form.ord_sno"
            ng-keydown="EnterSubmit()"></td>

Answer 1

看到了 ng 应该是 angular ,不清楚是 哪一个版本 的,所以就按一般情况吧

先做一个 x ,然后绑定ng-click,然后绑定一个 ng-click='clearData', 最后在 controller 中 加入下述函数即可

$scope.clearData = function(){
    $scope.vm.form.ord_sno = ''
};

html

<div class="form-group">
  <input type="text" class="form-control">
  <span class="input-cancel">X</span>
</div>

sass:

.form-group {
  top: 200px;
  left: 200px;
  width: 100px;
  position: relative;
  .input-cancel {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
  }
  .form-control {
    width: 100%;
    &:focus ~  .input-cancel, &:hover ~  .input-cancel {
      display: block; 
    }
  }
}

演示

以上代码不保证正确,请依照实际angular版本中的方法函数使用

Answer 2

给叉叉一个click事件，点击的时候把空值赋给input。好用的话给个赞 谢哈

Answer 3

给叉叉一个 click 事件，点击的时候设置 input.value = '' 即可

Answer 4

ie的input框目前还保留着框尾的x，直接点击可以清空，其余浏览器不支持，需要自己写一个点击事件，点击之后给input框赋值为空，正如楼上几位所言。