2. 程式人生 > >Angular解決輸入框由禁用狀態轉可用狀態自動獲取焦點失效問題

Angular解決輸入框由禁用狀態轉可用狀態自動獲取焦點失效問題

阿新 • • 發佈：2018-12-30

有時為了方便操作，我們會為輸入框設定預設焦點。而且會設定輸入許可權，會禁止使用者輸入。

但是當從禁止輸入切換為可輸入的時候，輸入框卻不能設定焦點了。

原因的話，我看了一下，估計是當我們改變輸入框繫結的值得時候，輸入框並沒有切換狀態，還是禁用狀態，所以我們無法設定焦點，就是執行順序的問題。

上程式碼吧，寫個指令，設定輸入框焦點。

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script
 
 src="jquery.js"></script>
    <script src="angular.js"></script>
    <script>
    angular.module("app", [])
        .controller("ctrl", function($scope) {
            $scope.data = [{
                name: "aaa",
                type: "string"
            }, {
                name: "bbb"
 
,
                type: "int"
            }, {
                name: "ccc",
                type: "float"
            }];

            $scope.init = function() {
                $scope.dim = $scope.data[0];
            }

            $scope.changeDim = function(i){
                $scope.dim = i;
            }

        })
        .directive("setFocus"
 
, function(){
            return {
                scope:{
                    ngModel:"="
                },
                link:function(scope, element, attrs){
                    scope.$watch("ngModel", function(n, o){
                        element.focus();
                    })
                }
            }
        })
    </script>
</head>

<body ng-init="init()" ng-controller="ctrl">
    <ul>
        <li ng-repeat="item in data" ng-click="dim = item">
            <a ng-click="changeDim(item)">{{item.name}}</a>
        </li>
    </ul>
    <input type="text" id="name" ng-disabled="dim.type == 'string'" ng-model="dim.name" set-focus>
</body>

</html>

效果：
這裡寫圖片描述


相關推薦

Angular解決輸入框由禁用狀態轉可用狀態自動獲取焦點失效問題

有時為了方便操作，我們會為輸入框設定預設焦點。而且會設定輸入許可權，會禁止使用者輸入。 但是當從禁止輸入切換為可輸入的時候，輸入框卻不能設定焦點了。 原因的話，我看了一下，估計是當我們改變輸入框繫結的值得時候，輸入框並沒有切換狀態，還是禁用狀態，所以我們無法

HTML中Input輸入框提示/設定禁用/自動獲取焦點

設定input輸入框的內容的方法很多，以下介紹兩個比較簡單實用的方法。 方法一： <input type="text" value="搜尋" onfocus="this.value=''" onblur="if(this.value==''){this.value='

解決輸入框游標不顯示

這個不是游標不顯示，其實是顯示了的，只是游標為白色，背景也為白色，這樣就看不出來。解決問題很簡單。一行程式碼。 android:textCursorDrawable=”@null” 這樣游標就和字型的顏色一致了。當然你也可以自己設定游標顏色，這個百度一大堆。

angular input輸入框中使用filter格式化日期

最近使用了angular日期選擇器，不過需要把選中的日期輸出到input輸入框中，如果按照預設情況，顯示的是時間戳形式的時間，不符合要求，需要把格式變成特定格式，但是input上ng-model上又不能直接使用filter，因此需要一種方法把這裡顯示的內容格式化。 網上尋找

解決ios環境下點選輸入框頁面被頂起不能自動回彈到底部問題

第一步：在標籤的輸入框中新增獲取焦點事件  程式碼寫法： @focus="getFocus" (vue程式碼)  可直接拷貝拿去放在自己頁面元素中，如下： <div class="o-field o-grid__cell carinfo-grid__cell">

進到頁面後input輸入框自動獲取焦點

只要在該input標籤後新增autofocus="autofocus"即可 程式碼例項： <html>     <head></head>     <body>         使用者名稱：<input type="te

Vue--由自動獲取焦點引出的DOM、mounted、自定義指令

order spl type bottom fcc auto 表達式 hit 默認 一.自動獲取焦點的DOM實現 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head>

文字框自動獲取焦點的兩種方式

文字框自動獲取焦點的兩種方式 1、html5的autofocus屬性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

Android 解決EditView自動獲取焦點

 <LinearLayout             android:layout_width="fill_parent"             android:layout_height="wrap_content"             android:bac

解決部分控制元件，自動獲取焦點的情況

簡單的描述一下：外層用一個大的，可滾動的view包著內容（有textview、listview、imageview等一個或多個情況下），你每次進入頁面時，可能會出現頂部被拉上去了。為啥會這樣呢？原因很

Edittext不自動獲取焦點解決方法以及獲取焦點後的事件實現方法

解決之道：在EditText的父級控制元件中找一個，設定成                         android:focusable="true"                      

html中的css和js控制input，textarea文字框自動獲取焦點

方法:1：js控制自動獲取焦點 <html> <head> <script type="text/javascript"> function setFocus() { do

JQuery下focus()無法自動獲取焦點的處理方法 jquery如何使文字框獲得焦點

今天遇見這麼一個小小的問題，就是文字框中需要輸入內容才可以提交，如果沒有輸入就提示並使該文字框獲得焦點！這麼一個簡單的事情如果沒有使用 jQuery的話 是不是物件.focus()就可以了， JavaScript Code複製內容到剪貼簿 //這樣執行，jquery只

移動端ios 輸入框fixed固定在底部 焦點時亂跳加遮蓋問題的解決 轉自zhangyunling 加個人專案解決方案

如果您有過移動端的開發經驗，那麼您是否碰到過這樣的問題，一個頁面有輸入框，當這個輸入框聚焦時，輸入框在IOS下，被移動到手機螢幕的當中去了，而在Android端，有些瀏覽器的輸入框，會被鍵盤蓋住。 1：前言 接下來就以最常見的頂部和底部固定輸入框來看一下，問題的來源，以及折中的解決方案

android全屏／沉浸式狀態列下，各種鍵盤擋住輸入框解決辦法

*本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出 在開發中，經常會遇到鍵盤擋住輸入框的情況，比如登入介面或註冊介面，彈出的軟鍵盤把登

在Angular輸入框內按下回車會觸發其它button的點選事件的解決方法

將不需要觸發事件的button上新增type="button"即可<button type="button" (click)="clickMe()">click</button>參考：https://stackoverflow.com/question

解決安卓全屏“FLAG_FULLSCREEN”狀態下“adjustResize”失效，全屏狀態下WebView的輸入框被軟鍵盤擋住的問題

沿著這個問題的線索，可以追溯到：http://code.google.com/p/android/issues/detail?id=5497   ，安卓官方問題回饋帖，這個問題的代號為“5497” ，就這個問題帖的回覆來看，該問題困惑了許多人數年之久，問題釋出日期“Dec

解決input框黃色背景問題（轉）

背景 一個 set form cnblogs pre 問題 解決 class input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important;} <form action="l

移動端Android軟鍵盤遮住輸入框解決！

res set pan area app tar span lac row 在使用vue的情況下，在輸入框中添加 <textarea class="textarea" @click="isAndroid" :maxlength="30" :rows="1" plac

移動端頁面輸入法擋住input輸入框的解決方法

寬高 定位 tex 百分比 address inpu cor strong lin 1，寬高用了百分比或者vw/vh布局的，input輸入框的最外層父容器的可用JS動態設置為當前窗口的寬高（防止輸入法的彈出令頁面變形） 2,最外層父容器用了fixed定位的，不要用top:0