Repository: incubator-weex-site Updated Branches: refs/heads/asf-site 66419cf21 -> 2dbeb8c99
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/2dbeb8c9/guide/integrate-to-your-app.html ---------------------------------------------------------------------- diff --git a/guide/integrate-to-your-app.html b/guide/integrate-to-your-app.html index b4beb1c..f59d97e 100644 --- a/guide/integrate-to-your-app.html +++ b/guide/integrate-to-your-app.html @@ -12,10 +12,16 @@ <meta property="og:site_name" content="Weex"> <meta property="og:description" content="Integrate to Your App#Integrate to Android Platform#The following documents assume that you already have a certain Android development experience. Quick Start Five Steps#The keys to intergrating Weex"> <meta property="og:locale" content="en"> -<meta property="og:updated_time" content="2018-01-18T04:06:47.667Z"> +<meta property="og:image" content="http://img1.tbcdn.cn/L1/461/1/4fe050b36e7fea52f121e73790b1fdb7ea934e97";> +<meta property="og:image" content="http://img4.tbcdn.cn/L1/461/1/52594fea03ee1154845d0f897558b81b4b5bef2e";> +<meta property="og:image" content="http://img1.tbcdn.cn/L1/461/1/bb3998595bafe9c9336411160c0b6bd3eeb843ef";> +<meta property="og:image" content="http://img1.tbcdn.cn/L1/461/1/ce309c54c7b3dd3607d7a3d07c44bfd0e0e10f86";> +<meta property="og:image" content="http://img3.tbcdn.cn/L1/461/1/430ae522f5031ff728c95efea49219a11e6852b3";> +<meta property="og:updated_time" content="2018-01-18T06:13:22.227Z"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Integrate to Your App"> <meta name="twitter:description" content="Integrate to Your App#Integrate to Android Platform#The following documents assume that you already have a certain Android development experience. Quick Start Five Steps#The keys to intergrating Weex"> +<meta name="twitter:image" content="http://img1.tbcdn.cn/L1/461/1/4fe050b36e7fea52f121e73790b1fdb7ea934e97";> <link rel="alternate" href="/atom.xml" title="Weex" type="application/atom+xml"> @@ -686,7 +692,7 @@ </h1> - <!-- <time class="article-date" datetime="2018-01-18T04:06:47.667Z">Updated time: 18/01/2018</time> --> + <!-- <time class="article-date" datetime="2018-01-18T06:13:22.227Z">Updated time: 18/01/2018</time> --> </header> <html><head></head><body><h1 class="article-heading"><span id="integrate-to-your-app">Integrate to Your App</span><a href="#integrate-to-your-app" class="header-anchor">#</a></h1><h2 class="article-heading"><span id="integrate-to-android-platform">Integrate to Android Platform</span><a href="#integrate-to-android-platform" class="header-anchor">#</a></h2><p>The following documents assume that you already have a certain Android development experience.</p> @@ -700,27 +706,42 @@ </ol> <p><a href="http://dotwe.org/vue/38e202c16bdfefbdb88a8754f975454c"; target="_blank" rel="noopener">Hello World Demo Source</a></p> <p>Tip: Click QRCode Image in Demo Source Page, your will see compiled bundle js.</p> -<h2 class="article-heading"><span id="integrated-to-ios">Integrated to iOS</span><a href="#integrated-to-ios" class="header-anchor">#</a></h2><p>Through the cocoaPods integrated Weex iOS SDK to the project.<br>First assume that you have finished installing the <a href="https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html"; target="_blank" rel="noopener">iOS development environment</a> and <a href="https://guides.cocoapods.org/using/getting-started.html"; target="_blank" rel="noopener">CocoaPods</a>.</p> -<h3 class="article-heading"><span id="step-1-add-dependencies">Step 1: Add Dependencies</span><a href="#step-1-add-dependencies" class="header-anchor">#</a></h3><p>Import Weex iOS SDK to your existing project, if not, you can create a new project.<br>Before proceeding, make sure that the Podfile file is under the project file. If not, create one and open with text editor.</p> +<h2 class="article-heading"><span id="integrated-to-ios">Integrated to iOS</span><a href="#integrated-to-ios" class="header-anchor">#</a></h2><p>Through the <a href="https://cocoapods.org/"; target="_blank" rel="noopener">CocoaPods</a> or <a href="https://github.com/Carthage/Carthage"; target="_blank" rel="noopener">Carthage</a> integrated Weex iOS SDK to your project.<br>First assume that you have finished installing the <a href="https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html"; target="_blank" rel="noopener">iOS development environment</a> and <a href="https://guides.cocoapods.org/using/getting-started.html"; target="_blank" rel="noopener">CocoaPods</a>(or <a href="https://github.com/Carthage/Carthage#installing-carthage"; target="_blank" rel="noopener">Carthage</a>).</p> +<h3 class="article-heading"><span id="step-1-add-dependencies">Step 1: Add Dependencies</span><a href="#step-1-add-dependencies" class="header-anchor">#</a></h3><p>Import Weex iOS SDK to your existing project, if not, you can create a new project according to the <a href="https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html"; target="_blank" rel="noopener">tutorial</a>).<br>Before proceeding, make sure that the Podfile file is under the project file. If not, create one and open with text editor(if Carthage, please ensure the <a href="https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#cartfile"; target="_blank" rel="noopener"><code>Cartfile</code></a> in your project directory). You can choose one of Integration method.</p> <ul> -<li>Integration framework</li> +<li><p>using <a href="https://cocoapods.org/"; target="_blank" rel="noopener">CocoaPods</a><br> WeexSDK The latest version on cocoaPods can be obtained <a href="https://cocoapods.org/pods/WeexSDK"; target="_blank" rel="noopener">here</a> .<br> Add the following to the Podfile file:</p> + <figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">source '[email protected]:CocoaPods/Specs.git'</span><br><span class="line">target 'YourTarget' do</span><br><span class="line"> platform :ios, '7.0'</span><br><span class="line"> pod 'WeexSDK', '0.17.0' ## latest Weex SDK recommended</span><br><span class="line">end</span><br></pre></td></tr></tbody></table></figure> +<p> Open the command line, switch to the directory of the Podfile file, and run the pod install command. If there are no errors, it means that the environment has been configured.</p> +</li> +<li>using <a href="https://github.com/Carthage/Carthage"; target="_blank" rel="noopener">Carthage</a><br><a href="https://github.com/apache/incubator-weex/tags"; target="_blank" rel="noopener">here</a> you can get the latest version of WeexSDK.<br>Add <code>github "apache/incubator-weex"</code> to <a href="https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#cartfile"; target="_blank" rel="noopener"><code>Cartfile</code></a><br>Open the command line, switch to the directory of the Cartfile, and run <code>carthage update</code>.<br><a href="https://github.com/Carthage/Carthage#adding-frameworks-to-an-application"; target="_blank" rel="noopener">Add Carthage build framework to your project</a></li> </ul> -<p>WeexSDK The latest version on cocoaPods can be obtained <a href="https://cocoapods.org/pods/WeexSDK"; target="_blank" rel="noopener">here</a> .<br>Add the following to the Podfile file:</p> -<figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">source '[email protected]:CocoaPods/Specs.git'</span><br><span class="line">target 'YourTarget' do</span><br><span class="line"> platform :ios, '7.0'</span><br><span class="line"> pod 'WeexSDK', '0.9.5' ## Suggest using latest Weex SDK</span><br><span class="line">end</span><br></pre></td></tr></tbody></table></figure> -<ul> -<li>Integrate with source code</li> -</ul> -<p>First copy the ios / sdk directory to your existing project directory (here to copy the root directory of your existing project as an example), and then add the Podfile file.</p> -<figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">source '[email protected]:CocoaPods/Specs.git'</span><br><span class="line">target 'YourTarget' do</span><br><span class="line"> platform :ios, '7.0'</span><br><span class="line"> pod 'WeexSDK', :path=>'./sdk/'</span><br><span class="line">end</span><br></pre></td></tr></tbody></table></figure> -<h3 class="article-heading"><span id="step-2-install-dependencies">Step 2: Install Dependencies</span><a href="#step-2-install-dependencies" class="header-anchor">#</a></h3><p>Open the command line, switch to the directory of the Podfile file, and run the pod install command. If there are no errors, it means that the environment has been configured.</p> -<h3 class="article-heading"><span id="step-3-initialize-the-weex-environment">Step 3: Initialize the Weex environment</span><a href="#step-3-initialize-the-weex-environment" class="header-anchor">#</a></h3><p>In the AppDelegate.m file to do the initialization operation, usually in the didFinishLaunchingWithOptions method as follows to add.</p> +<h3 class="article-heading"><span id="step-2-initialize-the-weex-environment">Step 2: Initialize the Weex environment</span><a href="#step-2-initialize-the-weex-environment" class="header-anchor">#</a></h3><p>In the AppDelegate.m file to do the initialization operation, usually in the didFinishLaunchingWithOptions method as follows to add.</p> <figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">//business configuration</span><br><span class="line">[WXAppConfiguration setAppGroup:@"AliApp"];</span><br><span class="line">[WXAppConfiguration setAppName:@"WeexDemo"];</span><br><span class="line">[WXAppConfiguration setAppVersion:@"1.0.0"];</span><br><span class="line">//init sdk environment</span><br><span class="line">[WXSDKEngine initSDKEnvironment];</span><br><span class="line">//register custom module and component，optional</span><br><span class="line">[WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponent class]];</span><br><span class="line">[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];</span><br><span class="line">//register the implementation of protocol, optional</span><br><span class="line">[WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationP rotocol)];</span><br><span class="line">//set the log level</span><br><span class="line">[WXLog setLogLevel: WXLogLevelAll];</span><br></pre></td></tr></tbody></table></figure> -<h3 class="article-heading"><span id="step-4-render-weex-instance">Step 4: Render weex Instance</span><a href="#step-4-render-weex-instance" class="header-anchor">#</a></h3><p>Weex supports both full page rendering and partial rendering. What you need to do is render Weex’s view with the specified URL and add it to its parent container. The parent container is generally a viewController.</p> +<h3 class="article-heading"><span id="step-3-render-weex-instance">Step 3: Render weex Instance</span><a href="#step-3-render-weex-instance" class="header-anchor">#</a></h3><p>Weex supports both full page rendering and partial rendering. What you need to do is render Weex’s view with the specified URL and add it to its parent container. The parent container is generally a viewController.</p> <figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">#import <WeexSDK/WXSDKInstance.h></span><br><span class="line">- (void)viewDidLoad</span><br><span class="line">{</span><br><span class="line"> [super viewDidLoad];</span><br><span class="line"> _instance = [[WXSDKInstance alloc] init];</span><br><span class="line"> _instance.viewController = self;</span><br><span class="line"> _instance.frame = self.view.frame;</span><br><span class="line"> __weak typeof(self) weakSelf = self;</span><br><span class="line"> _instance.onCreate = ^(UIView *view) {</span><br><span class="line"> [weakSelf.weexView removeFromSuperview];</span><br><span class="line"> weakSelf.weexView = view;</span><br><span class="line"> [weakSelf.view addSubview:weakSelf.weexView];</span><br><span class="line"> };</span><br><span class="line"> _instance.onFailed = ^(NSError *error) {</span><br><span class="line"> //process failure</span><br><span class="line"> };</span><br><span class="line"> _instance.renderFinish = ^ (UIView *view) {</span><br><span class="line"> //process renderFinish</span><br><span class="line"> };</span><br><span class="line"> NSURL *url = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"js"];</span><br><span class="line"> [_instance renderWithURL:url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure> <p>WXSDKInstance is a very important class that provides a basic method and some callbacks, such as renderWithURL, onCreate, onFailed, etc., can be found in WXSDKInstance.h.</p> -<h3 class="article-heading"><span id="step-5-destroy-weex-instance">Step 5: Destroy Weex Instance</span><a href="#step-5-destroy-weex-instance" class="header-anchor">#</a></h3><p>In the dealloc phase of the viewController destroyed Weex instance, can play a role in avoiding memory leaks.</p> +<h3 class="article-heading"><span id="step-4-destroy-weex-instance">Step 4: Destroy Weex Instance</span><a href="#step-4-destroy-weex-instance" class="header-anchor">#</a></h3><p>In the dealloc phase of the viewController destroyed Weex instance, can play a role in avoiding memory leaks.</p> <figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">- (void)dealloc</span><br><span class="line">{</span><br><span class="line"> [_instance destroyInstance];</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure> -<h4 class="article-heading"><span id="import-the-weex-sdk-framework-to-the-project">Import the Weex SDK framework to the project.</span><a href="#import-the-weex-sdk-framework-to-the-project" class="header-anchor">#</a></h4><p>The Weex SDK can be compiled from the source code. You can try the latest feature in the new feature or bugfix branch.<br>Refer to <a href="https://open.taobao.com/doc2/detail?spm=a219a.7629140.0.0.tFddsV&&docType=1&articleId=104829"; target="_blank" rel="noopener">here</a> for direct import of weexSDK.</p> +<h4 class="article-heading"><span id="build-your-own-weexsdk-framework-and-import-to-your-project">Build your own WeexSDK.framework and Import to your project.</span><a href="#build-your-own-weexsdk-framework-and-import-to-your-project" class="header-anchor">#</a></h4><p>The Weex SDK can be compiled from the source code. You can try the latest feature in the new feature or bugfix branch.</p> +<ul> +<li><p>clone <a href="https://github.com/apache/incubator-weex.git"; target="_blank" rel="noopener">Weex</a> project<br>you can use SSH</p> + <figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">git clone [email protected]:apache/incubator-weex.git</span><br></pre></td></tr></tbody></table></figure> +<p>or use https </p> + <figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">git clone https://github.com/apache/incubator-weex.git</span><br></pre></td></tr></tbody></table></figure> +</li> +</ul> +<ul> +<li><p>open WeexSDK.xcodeproj in <code>weex/ios/sdk</code><br>switch target just below<br><img src="http://img1.tbcdn.cn/L1/461/1/4fe050b36e7fea52f121e73790b1fdb7ea934e97"; alt="img"></p> +</li> +<li><p>Build this project or just use the xcode default hot key <code>⌘ + b</code></p> +</li> +<li><p>Finally you can find <code>Products</code> directory in <code>weex/ios/sdk</code>, <code>WeexSDK.framework</code> was here<br><img src="http://img4.tbcdn.cn/L1/461/1/52594fea03ee1154845d0f897558b81b4b5bef2e"; alt="img"></p> +</li> +<li><p>Add <code>js-framework</code>(which is in the <code>WeexSDK.framework</code> and renamed to <code>native-bundle-main.js</code>) to your main bundle<br><img src="http://img1.tbcdn.cn/L1/461/1/bb3998595bafe9c9336411160c0b6bd3eeb843ef"; alt="img"></p> +</li> +<li>Import the framework you get above and import system framework<br><img src="http://img1.tbcdn.cn/L1/461/1/ce309c54c7b3dd3607d7a3d07c44bfd0e0e10f86"; alt="img"> </li> +<li>add <code>-ObjC</code> to your project settings,just like this<br><img src="http://img3.tbcdn.cn/L1/461/1/430ae522f5031ff728c95efea49219a11e6852b3"; alt="img"></li> +</ul> </body></html> <div class="article-tips"> <p class="tips-text"> http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/2dbeb8c9/references/components/input.html ---------------------------------------------------------------------- diff --git a/references/components/input.html b/references/components/input.html index b9d2d50..09c39bc 100644 --- a/references/components/input.html +++ b/references/components/input.html @@ -12,7 +12,7 @@ <meta property="og:site_name" content="Weex"> <meta property="og:description" content="input#The weex builtin component input is used to create input controls to receive the userâs input characters. How a input component works varies considerably depending on the value of its type attri"> <meta property="og:locale" content="en"> -<meta property="og:updated_time" content="2018-01-18T04:41:08.921Z"> +<meta property="og:updated_time" content="2018-01-18T06:11:42.714Z"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="<input>"> <meta name="twitter:description" content="input#The weex builtin component input is used to create input controls to receive the userâs input characters. How a input component works varies considerably depending on the value of its type attri"> @@ -1044,16 +1044,16 @@ </h1> - <!-- <time class="article-date" datetime="2018-01-18T04:41:08.921Z">Updated time: 18/01/2018</time> --> + <!-- <time class="article-date" datetime="2018-01-18T06:11:42.714Z">Updated time: 18/01/2018</time> --> </header> <html><head></head><body><h1 class="article-heading"><span id="input">input</span><a href="#input" class="header-anchor">#</a></h1><p>The weex builtin component <code>input</code> is used to create input controls to receive the user’s input characters. How a <code>input</code> component works varies considerably depending on the value of its <code>type</code> attribute, such as <code>text</code>, <code>password</code>, <code>url</code>, <code>email</code>, <code>tel</code> etc.</p> <p><strong>Notes:</strong> does not support the common-event <code>click</code>. Please listen to the <code>input</code> or <code>change</code> event instead.</p> -<h2 class="article-heading"><span id="child-components">Child Components</span><a href="#child-components" class="header-anchor">#</a></h2><p>This component supports no child components.</p> +<h2 class="article-heading"><span id="child-components">Child Components</span><a href="#child-components" class="header-anchor">#</a></h2><p>This component does not support any child component.</p> <h2 class="article-heading"><span id="attributes">Attributes</span><a href="#attributes" class="header-anchor">#</a></h2><ul> -<li><p><code>type</code>: the type of controls to display. The default value is <code>text</code>, if this attribute is not specified. Possible values are <code>text</code>, <code>password</code>, <code>tel</code>, <code>email</code>, <code>url</code> , <code>number</code> etc. each of which has the same meaning with W3C standard.</p> +<li><p><code>type</code>: the type of controls to display. The default value is <code>text</code>, if this attribute is not specified. Possible values are <code>text</code>, <code>date</code>, <code>datetime</code>, <code>email</code>, <code>password</code>, <code>tel</code>, <code>time</code>, <code>url</code>, <code>number</code>. each of which has the same meaning with W3C standard.</p> </li> -<li><p><code>value</code>: the value(text) of the control.</p> +<li><p><code>value</code>: the default value(text) of the control.</p> </li> <li><p><code>placeholder</code>: a hint to the user of which can be entered to the control. The placeholder text must have no carriage returns or line-feeds.</p> </li> @@ -1061,9 +1061,19 @@ </li> <li><p><code>autofocus</code>: a boolean attribute lets you specify that a form control should have input focus when the page loads.</p> </li> +<li><p><code>singleline</code>: a boolean sttribute sets the properties of this field (lines, horizontally scrolling, transformation method) to be for a single-line input.</p> +</li> +<li><p><code>lines</code>: makes the input exactly this many lines tall.</p> +</li> +<li><p><code>max-length</code>: constrain edits not to make the length of the text greater than the specified length.</p> +</li> +<li><p><code>max</code> constrain the max date when <code>type</code> is <code>date</code>, format is <code>yyyy-MM-dd</code></p> +</li> +<li><p><code>min</code> constrain the min date when <code>type</code> is <code>date</code>, format is <code>yyyy-MM-dd</code> </p> +</li> <li><p><code>maxlength</code>: <span class="api-version">v0.7+</span> a number value to specify maxlength of input.</p> </li> -<li><p><code>return-key-type {string}</code>：<sup class="wx-v">v0.11</sup>the keybord returen key type support defalut;go;next;search;send,done.</p> +<li><p><code>return-key-type</code>：<sup class="wx-v">v0.11</sup>the keybord returen key type support <code>defalut</code>, <code>go</code>, <code>next</code>, <code>search</code>, <code>send</code>, <code>done</code>.</p> </li> </ul> <h2 class="article-heading"><span id="styles">Styles</span><a href="#styles" class="header-anchor">#</a></h2><ul> @@ -1079,11 +1089,11 @@ </li> <li><p>text styles: checkout <a href="../text-style.html">text styles</a></p> <ul> -<li>support ‘color’ style.</li> -<li>support ‘font-size’ style.</li> -<li>support ‘font-style’ style.</li> -<li>support ‘font-weight’ style.</li> -<li>support ‘text-align’ style.</li> +<li>support <code>color</code> style.</li> +<li>support <code>font-size</code> style.</li> +<li>support <code>font-style</code> style.</li> +<li>support <code>font-weight</code> style.</li> +<li>support <code>text-align</code> style.</li> </ul> </li> </ul> @@ -1091,15 +1101,15 @@ <ul> <li>support flexbox related styles.</li> <li>support box model related styles.</li> -<li>support ‘position’ related styles.</li> -<li>support ‘opacity’, ‘background-color’ etc.</li> +<li>support <code>position</code> related styles.</li> +<li>support <code>opacity</code>, <code>background-color</code> etc.</li> </ul> <h2 class="article-heading"><span id="events">Events</span><a href="#events" class="header-anchor">#</a></h2><ul> -<li>input: the value of an input character changes.</li> -<li>change: the change event is fired when a change to the component’s value is commited by the user. It always come after a ‘blur’ event.</li> -<li>focus: a component has received focus.</li> -<li>blur: a component has lost focus.</li> -<li><p><code>return</code>:the return key click.</p> +<li><code>input</code>: the input evenr is fired when input content changes.</li> +<li><code>change</code>: the change event is fired when a change to the component’s value is commited by the user. It always come after a <code>blur</code> event.</li> +<li><code>focus</code>: a component has received focus.</li> +<li><code>blur</code>: a component has lost focus.</li> +<li><p><code>return</code>: the return key clicked.</p> <p> the object property of event:</p> <ul> <li><code>returnKeyType</code>: return key Type of component</li> @@ -1109,7 +1119,7 @@ </ul> <h3 class="article-heading"><span id="common-events">common events</span><a href="#common-events" class="header-anchor">#</a></h3><p>check out <a href="../common-event.html">common events</a></p> <ul> -<li>support ‘appear’ / ‘disappear’ event.</li> +<li>support <code>appear</code> / <code>disappear</code> event.</li> </ul> <h3 class="article-heading"><span id="methoads">Methoads</span><a href="#methoads" class="header-anchor">#</a></h3><ul> <li><p><code>focus()</code> <span class="api-version">v0.9+</span></p> @@ -1133,10 +1143,17 @@ </ul> </li> </ul> -<h3 class="article-heading"><span id="notes">Notes</span><a href="#notes" class="header-anchor">#</a></h3><p>does not support the common-event ‘click’. Please listen to the ‘input’ or ‘change’ event instead.</p> +<h3 class="article-heading"><span id="notes">Notes</span><a href="#notes" class="header-anchor">#</a></h3><p>input does not support the common-event <code>click</code>. Please listen to the <code>input</code> or <code>change</code> event instead.</p> <h3 class="article-heading"><span id="parameters-of-events-object">Parameters of events’ object</span><a href="#parameters-of-events-object" class="header-anchor">#</a></h3><ul> -<li>for ‘input’ and ‘change’ events:’value’: the value of the component who dispatched this event.’timestamp’: the time stamp of the event.</li> -<li>for ‘focus’ and ‘blur’ events:’timestamp’: the time stamp of the event.</li> +<li>for <code>input</code> and <code>change</code> events:<ul> +<li><code>value</code>: the value of the component who dispatched this event.</li> +<li><code>timestamp</code>: the time stamp of the event.</li> +</ul> +</li> +<li>for <code>focus</code> and <code>blur</code> events:<ul> +<li><code>timestamp</code>: the time stamp of the event.</li> +</ul> +</li> </ul> <h2 class="article-heading"><span id="example">Example</span><a href="#example" class="header-anchor">#</a></h2><figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">style</span>=<span class="string">"font-size: 40px"</span>></span>oninput: {{txtInput}}<span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">style</span>=<span class="string">"font-size: 40px"</span>></span>onchange: {{txtChange}}<span class="tag"></<span class="name">text</span>> ;</span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">style</span>=<span class="string">"font-size: 40px"</span>></span>onreturntype: {{txtReturnType}}<span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">style</span>=<span class="string">"font-size: 40px"</span>></span>selection: {{txtSelection}}<span class="tag"></<span class="name">text</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">scroller</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class=" attr">style</span>=<span class="string">"background-color: #286090"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span> <span class="attr">style</span>=<span class="string">"height: 80 ;padding: 20;color: #FFFFFF"</span>></span>input type = text<span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">placeholder</span>=<span class="string">"Input Text"</span> <span class="attr">class</span>=<span class="string">"input"</span> <span class="attr">:autofocus</span>=<span class="string">true</span> <span class="attr">valu e</span>=<span class="string">""</span> @<span class="attr">change</span>=<span class="string">"onchange"</span> @<span class="attr">input</span>=<span class="string">"oninput"</span>/></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"background-color: #286090"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span> <span class="attr">style</span>=<span class="string">"height: 80 ;padding: 20;color: #FFFFFF"</span>></span>input type = password<span class="tag"></<span class ="name">text</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"password"</span> <span class="attr">placeholder</span>=<span class="string">"Input Password"</span> <span class="attr">class</span>=<span class="string">"input"</span> @<span class="attr">change</span>=<span class="string">"onchange"</span> @<span class="attr">input</span>=<span class="string">"oninput"</span>/></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span> =<span class="string">"background-color: #286090"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span> <span class="attr">style</span>=<span class="string">"height: 80 ;padding: 20;color: #FFFFFF"</span>></span>input type = url<span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"url"</span> <span class="attr">placeholder</span>=<span class="string">"Input URL"</span> <span class="attr">class</span>=<span class="string">"input"</span> @<span class="attr">change</span>=<span class="string">"onchange"</span> @<span class="attr">input</span >=<span class="string">"oninput"</span>/></span></span><br><span >class="line"> <span class="tag"></<span >class="name">div</span>></span></span><br><span >class="line"></span><br><span class="line"> <span class="tag"><<span >class="name">div</span>></span></span><br><span class="line"> <span >class="tag"><<span class="name">div</span> <span >class="attr">style</span>=<span class="string">"background-color: >#286090"</span>></span></span><br><span class="line"> <span >class="tag"><<span class="name">text</span> <span >class="attr">class</span>=<span class="string">"title"</span> <span >class="attr">style</span>=<span class="string">"height: 80 ;padding: >20;color: #FFFFFF"</span>></span>input type = email<span >class="tag"></<span class="name">text</span>></span></span><br><span >class="line"> <span class="tag"></<span >class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"email"</span> <span class="attr">placeholder</span>=<span class="string">"Input Email"</span> <span class="attr">class</span>=<span class="string">"input"</span> @<span class="attr">change</span>=<span class="string">"onchange"</span> @<span class="attr">input</span>=<span class="string">"oninput"</span>/></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"background-color: #286090"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <sp an class="attr">class</span>=<span class="string">"title"</span> <span class="attr">style</span>=<span class="string">"height: 80 ;padding: 20;color: #FFFFFF"</span>></span>input type = tel<span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"tel"</span> <span class="attr">placeholder</span>=<span class="string">"Input Tel"</span> <span class="attr">class</span>=<span class="string">"input"</span> @<span class="attr">change</span>=<span class="string">"onchange"</span> @<span class="attr">input</span>=<span class="string">"oninput"</span>/></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><s pan class="line"></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"background-color: #286090"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span> <span class="attr">style</span>=<span class="string">"height: 80 ;padding: 20;color: #FFFFFF"</span>></span>input type = time<span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"time"</span> <span class="attr">placeholder</span>=<spa n class="string">"Input Time"</span> <span class="attr">class</span>=<span class="string">"input"</span> @<span class="attr">change</span>=<span class="string">"onchange"</span> @<span class="attr">input</span>=<span class="string">"oninput"</span>/></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"background-color: #286090"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span> <span class="attr">style</span>=<span class="string">"height: 80 ;padding: 20;color: #FFFFFF&quo t;</span>></span>input type = number<span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"number"</span> <span class="attr">placeholder</span>=<span class="string">"Input number"</span> <span class="attr">class</span>=<span class="string">"input"</span> @<span class="attr">change</span>=<span class="string">"onchange"</span> @<span class="attr">input</span>=<span class="string">"oninput"</span>/></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="t ag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"background-color: #286090"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span> <span class="attr">style</span>=<span class="string">"height: 80 ;padding: 20;color: #FFFFFF"</span>></span>input type = date<span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"date"</span> <span class="attr">placeholder</span>=<span class="string">"Input Date"</span> <span class="attr">class</span>=<span class="string">"input"</span> @<span class="attr">change</span>=<span cl ass="string">"onchange"</span> @<span class="attr">input</span>=<span class="string">"oninput"</span> <span class="attr">max</span>=<span class="string">"2017-12-12"</span> <span class="attr">min</span>=<span class="string">"2015-01-01"</span>/></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"background-color: #286090"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span> <span class="attr">style</span>=<span class="string">"height: 80 ;padding: 20;color: #FFFFFF"</s pan>></span>input return-key-type = default<span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">placeholder</span>=<span class="string">"please input"</span> <span class="attr">return-key-type</span>=<span class="string">"default"</span> <span class="attr">class</span>=<span class="string">"input"</span> @<span class="attr">change</span>=<span class="string">"onchange"</span> @<span class="attr">return</span> = <span class="string">"onreturn"</span> @<span class="attr">input</span>=<span class="string">"oninput"</span> /></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span ></span><br><span class="line"></span><br><span class="line"> <span >class="tag"><<span class="name">div</span>></span></span><br><span >class="line"> <span class="tag"><<span class="name">div</span> ><span class="attr">style</span>=<span class="string">"background-color: >#286090"</span>></span></span><br><span class="line"> <span >class="tag"><<span class="name">text</span> <span >class="attr">class</span>=<span class="string">"title"</span> <span >class="attr">style</span>=<span class="string">"height: 80 ;padding: >20;color: #FFFFFF"</span>></span>input return-key-type = go<span >class="tag"></<span class="name">text</span>></span></span><br><span >class="line"> <span class="tag"></<span >class="name">div</span>></span></span><br><span class="line"> <span >class="tag"><<span class="name">input</span> <span >class="attr">type</span>=<span class="string">"text"</span> <span >class="attr"> placeholder</span>=<span class="string">"please input"</span> <span class="attr">return-key-type</span>=<span class="string">"go"</span> <span class="attr">class</span>=<span class="string">"input"</span> @<span class="attr">change</span>=<span class="string">"onchange"</span> @<span class="attr">return</span> = <span class="string">"onreturn"</span> @<span class="attr">input</span>=<span class="string">"oninput"</span> /></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"background-color: #286090"</span>></span></span><br><span class="line"> <span class="tag"><<span class="n ame">text</span> <span class="attr">class</span>=<span class="string">"title"</span> <span class="attr">style</span>=<span class="string">"height: 80 ;padding: 20;color: #FFFFFF"</span>></span>input return-key-type = next<span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">placeholder</span>=<span class="string">"please input"</span> <span class="attr">return-key-type</span>=<span class="string">"next"</span> <span class="attr">class</span>=<span class="string">"input"</span> @<span class="attr">change</span>=<span class="string">"onchange"</span> @<span class="attr">return</span> = <span class="string">"onreturn"</sp an> @<span class="attr">input</span>=<span class="string">"oninput"</span> /></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"background-color: #286090"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span> <span class="attr">style</span>=<span class="string">"height: 80 ;padding: 20;color: #FFFFFF"</span>></span>input return-key-type = search<span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span >></span></span><br><span class="line"> <span class="tag"><<span >class="name">input</span> <span class="attr">type</span>=<span >class="string">"text"</span> <span >class="attr">placeholder</span>=<span class="string">"please >input"</span> <span class="attr">return-key-type</span>=<span >class="string">"search"</span> <span >class="attr">class</span>=<span class="string">"input"</span> >@<span class="attr">change</span>=<span >class="string">"onchange"</span> @<span class="attr">return</span> >= <span class="string">"onreturn"</span> @<span >class="attr">input</span>=<span class="string">"oninput"</span> >/></span></span><br><span class="line"> <span class="tag"></<span >class="name">div</span>></span></span><br><span >class="line"></span><br><span class="line"> <span class="tag"><<span >class="name">div</span>></span></span><br><span class="line"> <span >class="tag"><<span class ="name">div</span> <span class="attr">style</span>=<span class="string">"background-color: #286090"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span> <span class="attr">style</span>=<span class="string">"height: 80 ;padding: 20;color: #FFFFFF"</span>></span>input return-key-type = send<span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">placeholder</span>=<span class="string">"please input"</span> <span class="attr">return-key-type</span>=<span class="string">"send"</span> <span class="attr">class</span>=<span c lass="string">"input"</span> @<span class="attr">change</span>=<span class="string">"onchange"</span> @<span class="attr">return</span> = <span class="string">"onreturn"</span> @<span class="attr">input</span>=<span class="string">"oninput"</span> /></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"background-color: #286090"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span> <span class="attr">style</span>=<span class="string">"height: 80 ;padding: 20;color: #FFFFFF&quo t;</span>></span>input return-key-type = done<span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">placeholder</span>=<span class="string">"please input"</span> <span class="attr">return-key-type</span>=<span class="string">"done"</span> <span class="attr">class</span>=<span class="string">"input"</span> @<span class="attr">change</span>=<span class="string">"onchange"</span> @<span class="attr">return</span> = <span class="string">"onreturn"</span> @<span class="attr">input</span>=<span class="string">"oninput"</span> /></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span> </span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"background-color: #286090"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span> <span class="attr">style</span>=<span class="string">"height: 80 ;padding: 20;color: #FFFFFF"</span>></span>function focus() & blur()<span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"flex-d irection: row;margin-bottom: 16px;justify-content: space-between"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"Focus"</span> <span class="attr">type</span>=<span class="string">"primary"</span> @<span class="attr">click</span>=<span class="string">"focus"</span>></span><span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"Blur"</span> <span class="attr">type</span>=<span class="string">"primary"</span> @<span class="attr">click</span>=<span class="string">"blur"</span>></span><span class ="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">placeholder</span>=<span class="string">"Input1"</span> <span class="attr">class</span>=<span class="string">"input"</span> <span class="attr">value</span>=<span class="string">""</span> <span class="attr">ref</span>=<span class="string">"input1"</span>/></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<spa n class="name">div</span> <span class="attr">style</span>=<span class="string">"background-color: #286090"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span> <span class="attr">style</span>=<span class="string">"height: 80 ;padding: 20;color: #FFFFFF"</span>></span>input selection<span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"flex-direction: row;margin-bottom: 16px;justify-content: space-between"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">&q uot;button"</span> <span class="attr">value</span>=<span class="string">"setRange"</span> <span class="attr">type</span>=<span class="string">"primary"</span> @<span class="attr">click</span>=<span class="string">"setRange"</span>></span><span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span> <span class="attr">class</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"getSelectionRange"</span> <span class="attr">type</span>=<span class="string">"primary"</span> @<span class="attr">click</span>=<span class="string">"getSelectionRange"</span>></span><span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class= "tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">ref</span>=<span class="string">"inputselection"</span> <span class="attr">placeholder</span>=<span class="string">"please input"</span> <span class="attr">value</span>=<span class="string">"123456789"</span> <span class="attr">class</span>=<span class="string">"input"</span> @<span class="attr">change</span>=<span class="string">"onchange"</span> @<span class="attr">return</span> = <span class="string">"onreturn"</span> @<span class="attr">input</span>=<span class="string">"oninput"</span>/></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> <span class="tag"></<span class="name">scroller</span>& gt;</span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="undefined"></span></span><br><span class="line"><span class="undefined"> .input {</span></span><br><span class="line"><span class="undefined"> font-size: 60px;</span></span><br><span class="line"><span class="undefined"> height: 80px;</span></span><br><span class="line"><span class="undefined"> width: 750px;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> .button {</span></span><br><span class="line"><span class="undefined"> font-size: 36;</span></span><br><span class="line"><span class="undefined"> width: 200;</span></span> <br><span class="line"><span class="undefined"> color: #41B883;</span></span><br><span class="line"><span class="undefined"> text-align: center;</span></span><br><span class="line"><span class="undefined"> padding-top: 10;</span></span><br><span class="line"><span class="undefined"> padding-bottom: 10;</span></span><br><span class="line"><span class="undefined"> border-width: 2;</span></span><br><span class="line"><span class="undefined"> border-style: solid;</span></span><br><span class="line"><span class="undefined"> margin-right: 20;</span></span><br><span class="line"><span class="undefined"> border-color: rgb(162, 217, 192);</span></span><br><span class="line"><span class="undefined"> background-color: rgba(162, 217, 192, 0.2);</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"></span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line">< /span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="undefined"></span></span><br><span class="line"><span class="javascript"> <span class="built_in">module</span>.exports = {</span></span><br><span class="line"><span class="javascript"> data: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span></span><br><span class="line"><span class="javascript"> <span class="keyword">return</span> {</span></span><br><span class="line"><span class="javascript"> txtInput: <span class="string">''</span>,</span></span><br><span class="line"><span class="javascript"> txtChange: <span class="string">''</span>,</span></span><br><span class="line"><span class="javascript"> txtReturnType: <span class="string">''</span>,</span></span><br><span class="line"><span class="javascript"> txtSelection:<span class="string">''</spa n>,</span></span><br><span class="line"><span class="javascript"> autofocus: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined"> };</span></span><br><span class="line"><span class="undefined"> },</span></span><br><span class="line"><span class="undefined"> methods: {</span></span><br><span class="line"><span class="javascript"> ready: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> self = <span class="keyword">this</span>;</span></span><br><span class="line"><span class="javascript"> setTimeout(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span></span><br><span class="line"><span class="javascript"> self.autofocus = <span class="literal">true</span>;</span></span><br><span class="line"><span cl ass="undefined"> }, 1000);</span></span><br><span class="line"><span class="undefined"> },</span></span><br><span class="line"><span class="javascript"> onchange: <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>{</span></span><br><span class="line"><span class="javascript"> <span class="keyword">this</span>.txtChange = event.value;</span></span><br><span class="line"><span class="javascript"> <span class="built_in">console</span>.log(<span class="string">'onchange'</span>, event.value);</span></span><br><span class="line"><span class="undefined"> },</span></span><br><span class="line"><span class="javascript"> onreturn: <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>{</span></span><br><span class="line"><span class="javascript"> <span class="keyword">this</span>.txtReturnType = event.returnKeyType;</span></span><br ><span class="line"><span class="javascript"> <span >class="built_in">console</span>.log(<span >class="string">'onreturn'</span>, >event.type);</span></span><br><span class="line"><span class="undefined"> > },</span></span><br><span class="line"><span class="javascript"> >oninput: <span class="function"><span class="keyword">function</span> (<span >class="params">event</span>) </span>{</span></span><br><span >class="line"><span class="javascript"> <span >class="keyword">this</span>.txtInput = event.value;</span></span><br><span >class="line"><span class="javascript"> <span >class="built_in">console</span>.log(<span >class="string">'oninput'</span>, >event.value);</span></span><br><span class="line"><span class="undefined"> > },</span></span><br><span class="line"><span class="javascript"> >focus: <span class="function"><span class="keyword">function</span> (<span >class="params"></span>) </span>{</span></span><br><span class="line"><span c lass="javascript"> <span class="keyword">this</span>.$refs[<span class="string">'input1'</span>].focus();</span></span><br><span class="line"><span class="undefined"> },</span></span><br><span class="line"><span class="javascript"> blur: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span></span><br><span class="line"><span class="javascript"> <span class="keyword">this</span>.$refs[<span class="string">'input1'</span>].blur();</span></span><br><span class="line"><span class="undefined"> },</span></span><br><span class="line"><span class="javascript"> setRange: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span></span><br><span class="line"><span class="javascript"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.$refs[<span class="string">"inputselection"</span>]);</span></spa n><br><span class="line"><span class="javascript"> <span class="keyword">this</span>.$refs[<span class="string">"inputselection"</span>].setSelectionRange(<span class="number">2</span>, <span class="number">6</span>);</span></span><br><span class="line"><span class="undefined"> },</span></span><br><span class="line"><span class="javascript"> getSelectionRange: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span></span><br><span class="line"><span class="javascript"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.$refs[<span class="string">"inputselection"</span>]);</span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> self = <span class="keyword">this</span>;</span></span><br><span class="line"><span class="javascript"> <span class="keyword">this</span>.$refs[<span class="string">"inputselection&quo t;</span>].getSelectionRange(<span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span></span><br><span class="line"><span class="javascript"> self.txtSelection = e.selectionStart +<span class="string">'-'</span> + e.selectionEnd;</span></span><br><span class="line"><span class="undefined"> });</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> };</span></span><br><span class="line"><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></tbody></table></figure> <p><a href="http://dotwe.org/vue/3470e4d0194f3879a72d38e2ab02cc9f"; target="_blank" rel="noopener">try it</a></p>
