Question

HTML文件

 page.html

<form autocomplete="off" name="form" ng-submit="form.$valid && submitRequest();"> 

<input type="tel" 
       minlength="10" 
       maxlength="10" 
       name="userPhone" 
       class="form-control height40"
       ng-model="user.phone" 
       ng-click="insertCounryCode();"
       placeholder="* Your 10 digit Mobile Number"  
       ng-disabled="disabledVal"
       required>

<button type="submit" class="btn btn-default request_call_submit form-control">Request Callback</button>
</form>

现在JS FIle

// app.js

// Controller

  $scope.user = {};


    $scope.insertCounryCode = function () {
        $scope.user.phone = "+91";
    }

    $scope.submitRequest = function () {
        // Submitting user response
    }

当用户点击此输入字段时，我可以添加+91，但我希望禁用此字段，以便用户无法更改+91。只有用户才能仅更改输入手机号码

是否有人会告诉我如何使用AngularJs做到这一点？

Answer 1

你可以做这样的事情

https://jsfiddle.net/k1vv55ty/2/

<input type="text" value="+91" class="disabled-input" disabled>
<input type="text" class="enabled-textbox">

CSS

 .disabled-input {
    width: 26px;
    background-color: transparent;
    box-shadow: none;
    outline: none;
    border-width: 1px;
    border-bottom: 1px solid #999;
    margin-right: -4px;
    padding: 1px 0;
}

.enabled-textbox {
   border: 1px solid #999;
   border-left-width: 0;
}

.enabled-textbox:focus {
  outline-offset: 0;
  outline: none;
}

这里我有覆盖焦点css。

Answer 2

我为这个要求添加了一个小提琴。我们可以通过CSS来做到这一点。请检查小提琴。 Fiddle。谢谢。如果这符合您的要求，请告诉我。在这里添加我的CSS和HTML

.input-box { position: relative; }

input { display: block; border: 1px solid #d7d6d6; background: #fff; padding: 10px 20px 10px 30px; width: 195px; }

.unit { position: absolute; display: block; left: px; top: 10px; z-index:  9; }



<div class="input-box">
  <input value="" autofocus="autofocus"/>
  <span class="unit">+91</span>
</div>

想要在输入字段中使用AngularJs禁用91

2 个答案: