Угловой JS - Фокусировка на текстовом поле

У меня есть таблица, в которой один элемент доступен для редактирования. При нажатии этого элемента текст изменяется на текстовое поле, и его можно редактировать. Проблема заключается в том, что при нажатии на текст текст изменяется на текстовое поле, но я не могу сосредоточиться на текстовом поле. Это кодУгловой JS - Фокусировка на текстовом поле

$scope.togglePrice = function (item) { 
    item.showUpdatePrice = true; 
}

HTML

<a ng-click="togglePrice(item)" ng-hide="item.showUpdatePrice" style="text-decoration:underline; cursor:pointer;">{{item.sellingPrice | currencyFormat}}</a> 

<input id="updatePriceId" ng-model="item.sellingPrice" class="form-control" ng-class="{'errorClass': showPriceError}" ng-show="item.showUpdatePrice" ng-blur="saveUpdatedPrice(item)" type="text" placeholder="Enter Price">

Редактировать

<tbody ng-repeat="item in shoppingItems"> 
<tr> 
<td class="priceDiv"> 
<div> 
<a ng-click="togglePrice(item)" ng-hide="item.showUpdatePrice" style="text-decoration:underline; cursor:pointer;">{{item.sellingPrice | currencyFormat}}</a> 
<input ng-model="item.sellingPrice" auto-focus class="form-control" ng-class="{'errorClass': showPriceError}" ng-show="item.showUpdatePrice" ng-blur="saveUpdatedPrice(item)" type="text" placeholder="Enter Price"> 
</div> 
</td> 
</tr> 
</tbody>

источник

2017-02-22 I' m nidhin

Вы должны внести небольшое изменение в свой метод и должны добавить одну директиву для достижения вашего решения.

$scope.togglePrice = function (item) { 
    item.showUpdatePrice = !item.showUpdatePrice; 

}

В этом решении, по щелчку на text-boxes, соответствующее текстовое поле получает сфокусированы и на размывания или нажав снаружи, он становится расфокусированным.

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 

 
Click to focus on Below TextBoxes: 
 
<table ng-controller="myCtrl"> 
 

 
<tbody ng-repeat="item in shoppingItems"> 
 
<tr> 
 
<td class="priceDiv"> 
 
<div> 
 
<a ng-click="togglePrice(item)" ng-hide="item.showUpdatePrice" \t style="text-decoration:underline; cursor:pointer;">{{item.sellingPrice}}</a> 
 
<input ng-model="item.sellingPrice" auto-focus class="form-control" ng-class="{'errorClass': showPriceError}" ng-show="item.showUpdatePrice" ng-blur="saveUpdatedPrice(item)" type="text" placeholder="Enter Price" focus-me="item.showUpdatePrice"> 
 
</div> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table> 
 

 
<script> 
 
var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
\t $scope.togglePrice = function (item) { 
 
    \t item.showUpdatePrice = !item.showUpdatePrice; 
 
     
 
\t } 
 

 
    $scope.shoppingItems = [ 
 
    { 
 
     "showUpdatePrice" : false, 
 
     "sellingPrice" : "10" 
 
    }, 
 
    { 
 
     "showUpdatePrice" : false, 
 
     "sellingPrice" : "20" 
 
    }, 
 
\t { 
 
     "showUpdatePrice" : false, 
 
     "sellingPrice" : "30" 
 
    }, 
 
    ] 
 
}); 
 
app.directive('focusMe', ['$timeout', '$parse', function ($timeout, $parse) { 
 
    return { 
 
     link: function (scope, element, attrs) { 
 
      var model = $parse(attrs.focusMe); 
 
      scope.$watch(model, function (value) { 
 
       if (value === true) { 
 
        $timeout(function() { 
 
         element[0].focus(); 
 
        }); 
 
       } 
 
      }); 
 
      element.bind('blur', function() { 
 
       scope.$apply(model.assign(scope, false)); 
 
      }); 
 
     } 
 
    }; 
 
}]); 
 
</script> 
 

 
</body> 
 
</html>

запустите ВЫШЕ SNIPPET

Here is a working DEMO

источник

2017-02-22 06:32:43 Sravan

Спасибо .. Это работает :) –

Обновить код с кодом ниже, может быть, это поможет вам. Он добавит уникальный идентификатор к вашему inputs в соответствии с индексом. Таким образом, вы можете просто получить к ним доступ, используя наиболее эффективные javascriptselector.

Измените ваш javascript на

$scope.togglePrice = function (item, buttonClicked) { 
    item.showUpdatePrice = true; 
    setTimeout(function(){ 
     document.getElementById(buttonClicked).focus(); 
    }); 
    }

И html

<tbody ng-repeat="item in shoppingItems"> 
    <tr> 
    <td class="priceDiv"> 
    <div> 
     <a ng-click="togglePrice(item, $index)" ng-hide="item.showUpdatePrice" style="text-decoration:underline; cursor:pointer;">{{item.sellingPrice | currencyFormat}}</a> 
     <input id='{{$index}}' ng-model="item.sellingPrice" auto-focus class="form-control" ng-class="{'errorClass': showPriceError}" ng-show="item.showUpdatePrice" ng-blur="saveUpdatedPrice(item)" type="text" placeholder="Enter Price"> 
    </div> 
    </td> 
    </tr> 
    </tbody>

Попробуйте Может быть, это поможет вам. Спасибо

источник

2017-02-22 05:54:42

Я попробовал это. Не работает. На загрузке страницы директива запускается, и в это время текстовое поле не отображается. только при щелчке текста текстовое поле видимо. –

Это таблица, для каждой строки будет текстовое поле с идентификатором updatePriceId. Так что Id не будет работать –

@ I'mnidhin Хорошо получилось, обновив мой ответ. –

Угловой JS - Фокусировка на текстовом поле

ответ

Смежные вопросы