angularjs - इनपुट फ़ील्ड पर फ़ोकस कैसे सेट करें?




angularjs-directive (20)

AngularJS में इनपुट फ़ील्ड पर फ़ोकस सेट करने के लिए 'कोणीय तरीका' क्या है?

अधिक विशिष्ट आवश्यकताओं:

  1. जब कोई Modal खोला जाता है, तो इस मॉडल के अंदर एक पूर्वनिर्धारित <input> पर फ़ोकस सेट करें।
  2. हर बार <input> दिखाई देता है (उदाहरण के लिए कुछ बटन क्लिक करके), उस पर ध्यान केंद्रित करें।

मैंने autofocus साथ पहली आवश्यकता को प्राप्त करने का प्रयास किया , लेकिन यह तब काम करता है जब मॉडल पहली बार खोला जाता है, और केवल कुछ ब्राउज़रों में (जैसे फ़ायरफ़ॉक्स में यह काम नहीं करता है)।

किसी भी तरह की सहायता को आभार समझेंगे।


  1. जब कोई मॉडल खोला जाता है, तो इस मॉडल के अंदर एक पूर्वनिर्धारित <इनपुट> पर फ़ोकस सेट करें।

एक निर्देश परिभाषित करें और इसे $ संपत्ति / ट्रिगर देखें, इसलिए यह जानता है कि तत्व को ध्यान में कब रखना है:

Name: <input type="text" focus-me="shouldBeOpen">

app.directive('focusMe', ['$timeout', '$parse', function ($timeout, $parse) {
    return {
        //scope: true,   // optionally create a child scope
        link: function (scope, element, attrs) {
            var model = $parse(attrs.focusMe);
            scope.$watch(model, function (value) {
                console.log('value=', value);
                if (value === true) {
                    $timeout(function () {
                        element[0].focus();
                    });
                }
            });
            // to address @blesh's comment, set attribute value to 'false'
            // on blur event:
            element.bind('blur', function () {
                console.log('blur');
                scope.$apply(model.assign(scope, false));
            });
        }
    };
}]);

Plunker

प्रस्तुत करने के लिए मोडल समय देने के लिए $ टाइमआउट की आवश्यकता होती है।

'2.' हर बार <इनपुट> दिखाई देता है (उदाहरण के लिए कुछ बटन क्लिक करके), उस पर ध्यान केंद्रित करें।

एक उपरोक्त की तरह अनिवार्य रूप से एक निर्देश बनाएँ। कुछ स्कोप संपत्ति देखें, और जब यह सत्य हो जाए (इसे अपने एनजी-क्लिक हैंडलर में सेट करें), element[0].focus() निष्पादित करें element[0].focus() । आपके उपयोग के मामले के आधार पर, आपको इस के लिए $ टाइमआउट की आवश्यकता हो सकती है या नहीं:

<button class="btn" ng-click="showForm=true; focusInput=true">show form and
 focus input</button>
<div ng-show="showForm">
  <input type="text" ng-model="myInput" focus-me="focusInput"> {{ myInput }}
  <button class="btn" ng-click="showForm=false">hide form</button>
</div>

app.directive('focusMe', function($timeout) {
  return {
    link: function(scope, element, attrs) {
      scope.$watch(attrs.focusMe, function(value) {
        if(value === true) { 
          console.log('value=',value);
          //$timeout(function() {
            element[0].focus();
            scope[attrs.focusMe] = false;
          //});
        }
      });
    }
  };
});

Plunker

7/2013 अपडेट करें : मैंने देखा है कि कुछ लोग मेरे मूल पृथक दायरे निर्देशों का उपयोग करते हैं और फिर एम्बेडेड इनपुट फ़ील्ड्स (यानी, मोडल में इनपुट फ़ील्ड) के साथ समस्याएं होती हैं। बिना किसी नए दायरे (या संभवतः एक नए बच्चे के दायरे) के साथ निर्देश कुछ दर्द को कम करना चाहिए। तो ऊपर मैंने अलग-अलग क्षेत्रों का उपयोग न करने के लिए उत्तर अपडेट किया। नीचे मूल उत्तर है:

एक अलग दायरे का उपयोग कर 1. के लिए मूल जवाब:

Name: <input type="text" focus-me="{{shouldBeOpen}}">

app.directive('focusMe', function($timeout) {
  return {
    scope: { trigger: '@focusMe' },
    link: function(scope, element) {
      scope.$watch('trigger', function(value) {
        if(value === "true") { 
          $timeout(function() {
            element[0].focus(); 
          });
        }
      });
    }
  };
});

Plunker

2. के लिए मूल उत्तर, एक अलग दायरे का उपयोग कर:

<button class="btn" ng-click="showForm=true; focusInput=true">show form and
 focus input</button>
<div ng-show="showForm">
  <input type="text" focus-me="focusInput">
  <button class="btn" ng-click="showForm=false">hide form</button>
</div>

app.directive('focusMe', function($timeout) {
  return {
    scope: { trigger: '=focusMe' },
    link: function(scope, element) {
      scope.$watch('trigger', function(value) {
        if(value === true) { 
          //console.log('trigger',value);
          //$timeout(function() {
            element[0].focus();
            scope.trigger = false;
          //});
        }
      });
    }
  };
});

Plunker

चूंकि हमें निर्देश में ट्रिगर / फोकस इनपुट गुण को रीसेट करने की आवश्यकता है, इसलिए '=' दो-तरफा डाटाबेसिंग के लिए उपयोग किया जाता है। पहले निर्देश में, '@' पर्याप्त था। यह भी ध्यान रखें कि '@' का उपयोग करते समय हम ट्रिगर मान की तुलना "सत्य" से करते हैं क्योंकि हमेशा @ स्ट्रिंग में परिणाम होता है।


(संपादित करें: मैंने इस स्पष्टीकरण के नीचे एक अद्यतन समाधान जोड़ा है)

मार्क राजकोक आदमी है ... और उसका जवाब एक वैध जवाब है, लेकिन इसमें एक दोष (माफ करना मार्क) है ...

... इनपुट पर ध्यान केंद्रित करने के लिए बूलियन का उपयोग करने का प्रयास करें, फिर इनपुट को धुंधला करें, फिर इनपुट को फिर से केंद्रित करने के लिए इसका उपयोग करने का प्रयास करें। यह तब तक काम नहीं करेगा जब तक आप बूलियन को झूठी नहीं पढ़ते, फिर $ पाचन करें, फिर इसे सही पर रीसेट करें। यहां तक ​​कि यदि आप अपनी अभिव्यक्ति में स्ट्रिंग तुलना का उपयोग करते हैं, तो आपको स्ट्रिंग को किसी और चीज़ में बदलने के लिए मजबूर होना होगा, $ पचाना होगा, फिर इसे वापस बदलें। (यह धुंध घटना हैंडलर के साथ संबोधित किया गया है।)

तो मैं इस वैकल्पिक समाधान का प्रस्ताव करता हूं:

एक घटना का उपयोग करें, कोणीय की भूल गई सुविधा।

जावास्क्रिप्ट सभी के बाद घटनाओं को प्यार करता है। घटनाएं निस्संदेह कमजोर युग्मित हैं, और इससे भी बेहतर, आप अपने $ पाचन में एक और $ घड़ी जोड़ने से बचें।

app.directive('focusOn', function() {
   return function(scope, elem, attr) {
      scope.$on(attr.focusOn, function(e) {
          elem[0].focus();
      });
   };
});

तो अब आप इसे इस तरह इस्तेमाल कर सकते हैं:

<input type="text" focus-on="newItemAdded" />

और फिर अपने ऐप में कहीं भी ...

$scope.addNewItem = function () {
    /* stuff here to add a new item... */

    $scope.$broadcast('newItemAdded');
};

यह बहुत ही बढ़िया है क्योंकि आप इस तरह की चीजों के साथ सभी प्रकार की चीजें कर सकते हैं। एक के लिए, आप पहले से मौजूद घटनाओं में बांध सकते हैं। एक और चीज के लिए आप अपने ऐप के विभिन्न हिस्सों को प्रकाशित करने से कुछ स्मार्ट करना शुरू कर देते हैं, जो आपके ऐप के अन्य हिस्सों की सदस्यता ले सकते हैं।

वैसे भी, इस तरह की चीज मुझे "घटना संचालित" चिल्लाती है। मुझे लगता है कि कोणीय डेवलपर्स के रूप में हम घटना आकार छेद में $ स्कोप आकार वाले खूंटी हथियाने के लिए वास्तव में कड़ी मेहनत करते हैं।

क्या यह सबसे अच्छा समाधान है? मुझे नही पता। यह एक समाधान है।

अद्यतन समाधान

@ ShimonRachlenko की टिप्पणी के बाद, मैंने इसे थोड़ा करने की अपनी पद्धति बदल दी है। अब मैं एक सेवा के संयोजन और एक निर्देश का उपयोग करता हूं जो "दृश्यों के पीछे" एक घटना को संभालता है:

इसके अलावा, यह उपरोक्त उल्लिखित वही प्रिंसिपल है।

यहां एक त्वरित डेमो प्लंक है

प्रयोग

<input type="text" focus-on="focusMe"/>
app.controller('MyCtrl', function($scope, focus) {
    focus('focusMe');
});

स्रोत

app.directive('focusOn', function() {
   return function(scope, elem, attr) {
      scope.$on('focusOn', function(e, name) {
        if(name === attr.focusOn) {
          elem[0].focus();
        }
      });
   };
});

app.factory('focus', function ($rootScope, $timeout) {
  return function(name) {
    $timeout(function (){
      $rootScope.$broadcast('focusOn', name);
    });
  }
});

आप केवल एक निर्देश बना सकते हैं जो पोस्टलिंकिंग पर सजाए गए तत्व पर ध्यान केंद्रित करे:

angular.module('directives')
.directive('autoFocus', function() {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            _element[0].focus();
        }
    };
});

फिर अपने एचटीएमएल में:

<input type="text" name="first" auto-focus/> <!-- this will get the focus -->
<input type="text" name="second"/>

यह मॉडलों और एनजी-अगर टॉगल किए गए तत्वों के लिए काम करेगा, एनजी-शो के लिए नहीं, क्योंकि पोस्टिंग केवल HTML प्रसंस्करण पर होती है।


आप कोणीय में निर्मित jqlite कार्यक्षमता का भी उपयोग कर सकते हैं।

angular.element('.selector').trigger('focus');



ज़ोंबी को पुनर्जीवित नहीं करना या अपना खुद का निर्देश प्लग नहीं करना (ठीक है कि मैं वही कर रहा हूं):

https://github.com/hiebj/ng-focus-if

http://plnkr.co/edit/MJS3zRk079Mu72o5A9l6?p=preview

<input focus-if />

(function() {
    'use strict';
    angular
        .module('focus-if', [])
        .directive('focusIf', focusIf);

    function focusIf($timeout) {
        function link($scope, $element, $attrs) {
            var dom = $element[0];
            if ($attrs.focusIf) {
                $scope.$watch($attrs.focusIf, focus);
            } else {
                focus(true);
            }
            function focus(condition) {
                if (condition) {
                    $timeout(function() {
                        dom.focus();
                    }, $scope.$eval($attrs.focusDelay) || 0);
                }
            }
        }
        return {
            restrict: 'A',
            link: link
        };
    }
})();

बूटस्ट्रैप प्लगइन के साथ कोणीय का उपयोग करने वालों के लिए:

http://angular-ui.github.io/bootstrap/#/modal

आप मोडल उदाहरण के opened वादे में हुक कर सकते हैं:

modalInstance.opened.then(function() {
        $timeout(function() {
            angular.element('#title_input').trigger('focus');
        });
    });

modalInstance.result.then(function ( etc...

मार्क और ब्लेश के पास बहुत अच्छे जवाब हैं; हालांकि, मार्क की एक दोष है कि ब्लेश बताते हैं (कार्यान्वित करने के लिए जटिल होने के अलावा), और मुझे लगता है कि ब्लेश के जवाब में ऐसी सेवा बनाने में एक अर्थपूर्ण त्रुटि है जो विशेष रूप से फ्रंटेंड को फोकस अनुरोध भेजने के बारे में है, जब वास्तव में उसे आवश्यक सभी तरीकों का एक तरीका था जब तक सभी निर्देश सुन रहे थे तब तक घटना में देरी हुई।

तो यहां मैं ऐसा कर रहा हूं जो ब्लेश के जवाब से बहुत कुछ चुरा लेता है लेकिन नियंत्रक घटना के अर्थशास्त्र और "लोड के बाद" सेवा को अलग रखता है।

यह नियंत्रक घटना को केवल एक विशिष्ट तत्व पर ध्यान केंद्रित करने के अलावा अन्य चीज़ों के लिए आसानी से लगाया जा सकता है और यदि आवश्यक हो तो "लोड के बाद" कार्यक्षमता के ऊपरी हिस्से को भी अनुमति देता है, जो कि कई मामलों में नहीं हो सकता है।

प्रयोग

<input type="text" focus-on="controllerEvent"/>
app.controller('MyCtrl', function($scope, afterLoad) {
  function notifyControllerEvent() {
      $scope.$broadcast('controllerEvent');
  }

  afterLoad(notifyControllerEvent);
});

स्रोत

app.directive('focusOn', function() {
   return function(scope, elem, attr) {
      scope.$on(attr.focusOn, function(e, name) {
        elem[0].focus();
      });
   };
});

app.factory('afterLoad', function ($rootScope, $timeout) {
  return function(func) {
    $timeout(func);
  }
});

मुझे कुछ अन्य उत्तरों को अत्यधिक जटिल माना गया है जब आपको वास्तव में इसकी आवश्यकता है

app.directive('autoFocus', function($timeout) {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            $timeout(function(){
                _element[0].focus();
            }, 0);
        }
    };
});

उपयोग है

<input name="theInput" auto-focus>

हम डोम में चीजों को प्रस्तुत करने के लिए टाइमआउट का उपयोग करते हैं, भले ही यह शून्य हो, फिर भी कम से कम इसके लिए इंतजार कर रहा है - इस तरह यह मोडल में भी काम करता है और क्या नहीं


मुझे नहीं लगता कि $ टाइमआउट सृजन पर तत्व को ध्यान केंद्रित करने का एक अच्छा तरीका है। यहां अंतर्निहित कोणीय कार्यक्षमता का उपयोग करके एक विधि है, जो कोणीय दस्तावेज़ों की गहरी गहराई से बाहर निकलती है। ध्यान दें कि प्री-लिंक और पोस्ट-लिंक फ़ंक्शंस के लिए "लिंक" विशेषता को "प्री" और "पोस्ट" में कैसे विभाजित किया जा सकता है।

कार्य उदाहरण: http://plnkr.co/edit/Fj59GB

// this is the directive you add to any element you want to highlight after creation
Guest.directive('autoFocus', function() {
    return {
        link: {
            pre: function preLink(scope, element, attr) {
                console.debug('prelink called');
                // this fails since the element hasn't rendered
                //element[0].focus();
            },
            post: function postLink(scope, element, attr) {
                console.debug('postlink called');
                // this succeeds since the element has been rendered
                element[0].focus();
            }
        }
    }
});
<input value="hello" />
<!-- this input automatically gets focus on creation -->
<input value="world" auto-focus />

पूर्ण कोणीय जेएस निर्देशक डॉक्स: https://docs.angularjs.org/api/ng/service/$compile


मैं 'मार्क राजकोक' फोकस संपादित करता हूं एक तत्व में एकाधिक फोकस के लिए काम करने का निर्देश।

HTML:

<input  focus-me="myInputFocus"  type="text">

AngularJs नियंत्रक में:

$scope.myInputFocus= true;

अंगुलाजेएस निर्देश:

app.directive('focusMe', function ($timeout, $parse) {
    return {
        link: function (scope, element, attrs) {
            var model = $parse(attrs.focusMe);
            scope.$watch(model, function (value) {
                if (value === true) {
                    $timeout(function () {
                        scope.$apply(model.assign(scope, false));
                        element[0].focus();
                    }, 30);
                }
            });
        }
    };
});

मैं बेहतर समाधान के लिए खोज करने और इसे खोजने के बाद इस चर्चा में योगदान देना चाहता हूं, इसे इसके बजाय बनाना है।

मानदंड: 1. पुनः उपयोगिता बढ़ाने के लिए समाधान माता-पिता नियंत्रक के दायरे से स्वतंत्र होना चाहिए। 2. कुछ स्थितियों की निगरानी के लिए $ घड़ी के उपयोग से बचें, यह धीमा है, पाचन लूप का आकार बढ़ाता है और परीक्षण को कठिन बनाता है। 3. $ टाइमआउट या $ स्कोप से बचें। $ डाइजेस्ट लूप ट्रिगर करने के लिए () लागू करें। 4. तत्व के भीतर एक इनपुट तत्व मौजूद है जहां निर्देश का उपयोग खुला होता है।

यह वह समाधान है जिसे मुझे सबसे ज्यादा पसंद आया:

निर्देशक:

.directive('focusInput', [ function () {
    return {
        scope: {},
        restrict: 'A',
        compile: function(elem, attr) {
            elem.bind('click', function() {
                elem.find('input').focus();                
            });
        }        
    };
}]);

Html:

 <div focus-input>
     <input/>
 </div>

I hope this will help someone out there!


यदि आप modalInstance का उपयोग कर रहे हैं और ऑब्जेक्ट है तो आप मोडल खोलने के बाद क्रियाएं करने के लिए "फिर" का उपयोग कर सकते हैं। यदि आप modalInstance का उपयोग नहीं कर रहे हैं, और मोडल खोलने के लिए हार्ड कोडित हैं तो आप ईवेंट का उपयोग कर सकते हैं। $ टाइमआउट एक अच्छा समाधान नहीं है।

आप कर सकते हैं (बूटस्ट्रैप 3):

$("#" + modalId).on("shown.bs.modal", function() {
    angular.element("[name='name']").focus();
});

मोडल इंस्टेंस पर आप ओपन मोडल के बाद कोड को निष्पादित करने के लिए लाइब्रेरी को देख सकते हैं।

इस तरह के $ टाइमआउट का उपयोग न करें, $ टाइमआउट 0, 1, 10, 30, 50, 200 या उससे अधिक हो सकता है, यह क्लाइंट कंप्यूटर पर निर्भर करेगा, और मोडल खोलने की प्रक्रिया होगी।

$ टाइमआउट का उपयोग न करें जब आप ध्यान केंद्रित कर सकें तो विधि आपको बताएगी;)

मुझे उम्मीद है कि यह मदद! :)


यदि आप सिर्फ एक साधारण फोकस चाहते थे जिसे एनजी-क्लिक द्वारा नियंत्रित किया गया था।

एचटीएमएल:

<input ut-focus="focusTigger">

<button ng-click="focusTrigger=!focusTrigger" ng-init="focusTrigger=false"></button>

निर्देशक:

'use strict'

angular.module('focus',['ng'])
.directive('utFocus',function($timeout){
    return {
        link:function(scope,elem,attr){
            var focusTarget = attr['utFocus'];
            scope.$watch(focusTarget,function(value){
                $timeout(function(){
                    elem[0].focus();
                });
            });
        }
    }
});

यहां सिर्फ एक नौसिखिया है, लेकिन मैं इस निर्देश के साथ http://angular-ui.github.io/bootstrap/#/modal में काम करने के लिए सक्षम था:

directives.directive('focus', function($timeout) {
    return {
        link : function(scope, element) {
            scope.$watch('idToFocus', function(value) {
                if (value === element[0].id) {
                    $timeout(function() {
                        element[0].focus();
                    });
                }
            });
        }
    };
});

और $ modal.open विधि में मैंने उस तत्व को इंगित करने के लिए फोल्डिंग का उपयोग किया जहां फोकस रखा जाना चाहिए:

var d = $modal.open({
        controller : function($scope, $modalInstance) {
            ...
            $scope.idToFocus = "cancelaAteste";
    }
        ...
    });

टेम्पलेट पर मेरे पास यह है:

<input id="myInputId" focus />

वांछित फोकस तत्व निर्देश टेम्पलेट में इंजेक्शन दिए जाने पर पिछले सभी उत्तर काम नहीं करते हैं। निम्नलिखित निर्देश सरल तत्व या निर्देश इंजेक्शन तत्व दोनों के लिए उपयुक्त है (मैंने इसे टाइपस्क्रिप्ट में लिखा है)। यह आंतरिक फोकस करने योग्य तत्व के लिए चयनकर्ता स्वीकार करता है। अगर आपको स्वयं तत्व को ध्यान केंद्रित करने की आवश्यकता है - निर्देश के लिए कोई चयनकर्ता पैरामीटर न भेजें:

module APP.Directives {

export class FocusOnLoadDirective implements ng.IDirective {
    priority = 0;
    restrict = 'A';

    constructor(private $interval:any, private $timeout:any) {

    }

    link = (scope:ng.IScope, element:JQuery, attrs:any) => {
        var _self = this;
        var intervalId:number = 0;


        var clearInterval = function () {
            if (intervalId != 0) {
                _self.$interval.cancel(intervalId);
                intervalId = 0;
            }
        };

        _self.$timeout(function(){

                intervalId = _self.$interval(function () {
                    let focusableElement = null;
                    if (attrs.focusOnLoad != '') {
                        focusableElement = element.find(attrs.focusOnLoad);
                    }
                    else {
                        focusableElement = element;
                    }
                    console.debug('focusOnLoad directive: trying to focus');
                    focusableElement.focus();
                    if (document.activeElement === focusableElement[0]) {
                        clearInterval();
                    }
                }, 100);

                scope.$on('$destroy', function () {
                    // Make sure that the interval is destroyed too
                    clearInterval();
                });

        });
    };

    public static factory = ():ng.IDirectiveFactory => {
        let directive = ($interval:any, $timeout:any) => new FocusOnLoadDirective($interval, $timeout);
        directive.$inject = ['$interval', '$timeout'];
        return directive;
    };
}

angular.module('common').directive('focusOnLoad', FocusOnLoadDirective.factory());

}

सरल तत्व के लिए उपयोग उदाहरण:

<button tabindex="0" focus-on-load />

आंतरिक तत्व के लिए उपयोग उदाहरण (आमतौर पर गतिशील इंजेक्शन तत्व के लिए टेम्पलेट के साथ निर्देश):

<my-directive focus-on-load="input" />

आप "इनपुट" के बजाय किसी भी jQuery चयनकर्ता का उपयोग कर सकते हैं


सबसे पहले, फोकस करने का एक आधिकारिक तरीका 1.1 के लिए रोडमैप पर है। इस बीच, आप सेटिंग फोकस को लागू करने के लिए एक निर्देश लिख सकते हैं।

दूसरा, किसी आइटम पर फ़ोकस सेट करने के बाद इसे वर्तमान में एक वर्कअराउंड की आवश्यकता होती है। एक $timeout साथ तत्व फोकस () पर बस अपनी कॉल में देरी करें।

चूंकि एक ही नियंत्रक-संशोधित-डीओएम समस्या फोकस, धुंध और चयन के लिए मौजूद है, मैं एक ng-target निर्देश रखने का प्रस्ताव करता हूं:

<input type="text" x-ng-model="form.color" x-ng-target="form.colorTarget">
<button class="btn" x-ng-click="form.colorTarget.focus()">do focus</button>

यहां कोणीय धागा: http://goo.gl/ipsx4 , और अधिक जानकारी यहां ब्लॉग की गई: http://goo.gl/4rdZa

निम्नलिखित निर्देश आपके ng-target विशेषता द्वारा निर्दिष्ट आपके नियंत्रक के अंदर एक। .focus() फ़ंक्शन .focus() । (यह एक .blur() और a .select() भी बनाता है।) डेमो: http://jsfiddle.net/bseib/WUcQX/


ngModelController का उपयोग करना भी संभव है। 1.6+ के साथ काम करना (पुराने संस्करणों के साथ नहीं पता)।

एचटीएमएल

<form name="myForm">
    <input type="text" name="myText" ng-model="myText">
</form>

जे एस

$scope.myForm.myText.$$element.focus();

-

एनबी: संदर्भ के आधार पर, आपको एक टाइमआउट फ़ंक्शन में लपेटना पड़ सकता है।

एनबी²: controllerAs एएस का उपयोग करते समय, यह लगभग वही है। name="vm.myForm" name="myForm" साथ name="myForm" को बस बदलें और जेएस में, vm.myForm.myText.$$element.focus();


It's easy.. try this

एचटीएमएल

<select id="ddl00">  
 <option>"test 01"</option>  
</select>

javascript

document.getElementById("ddl00").focus();

बस कुछ कॉफी में फेंकना।

app.directive 'ngAltFocus', ->
    restrict: 'A'
    scope: ngAltFocus: '='
    link: (scope, el, attrs) ->
        scope.$watch 'ngAltFocus', (nv) -> el[0].focus() if nv




angularjs-directive