2015-08-06 5 views
0

Я создал cordova приложение, используя узел, угловой, sqlite. Приложение состоит из многостраничный код. Когда я заполняю форму, тогда поля ввода отстают означает , они берут время, чтобы показать введенные данные. Может ли кто-нибудь сказать мне причины, по которым эти проблемы возникают. Моя страница фермы довольно велика, значит она состоит из большого нет. полей, которые разделены на четыре части, и я показываю их 1 к 1 после того, как другие скрывают, а затем отправляют их в конце.Кордоба формы ввода поля ввода в показе данных при вводе

это форма

<form name="signupForm" data-ng-submit="gotoAddress()"> 
    <div class="col-sm-12 col-xs-12 top-bottom-border"> <span class="heading">Personal Info</span> 

    </div> 
    <div class="col-sm-12 col-xs-12"> 
     <div class="form-group form-group-custom"> 
      <label class="form-tags-info-page" for="name">Name</label> 
      <br> 
      <input class="form-control" id="input-elements-info-page" placeholder="name" type="text" name="ufname" ng-pattern="/^[a-zA-Z0-9\-\s\,]{1,100}$/" ng-model="myForm.name" required> 
      <div class="help-block" spellcheck="false" autocomplete="off"> 
       <p style="color: red" ng-show="signupForm.ufname.$dirty && signupForm.ufname.$touched && signupForm.ufname.$error.required">Name is required</p> 
       <p style="color: red" ng-show="signupForm.ufname.$dirty && signupForm.ufname.$touched && signupForm.ufname.$error.pattern">Enter a valid Name</p> 
      </div> 
     </div> 
     <div class="col-sm-12 col-xs-12 remove-all-padding"> 
      <div class="form-group col-sm-6 col-xs-6 remove-all-padding age-group" ng-class="{ 'has-error' : submitted && signupForm.age.$invalid }"> 
       <label class="form-tags-info-page" for="age">Age(in year)</label> 
       <br> 
       <input name="age" class="form-control" id="input-elements-info-page" type="number" ng-model="myForm.age" min="14" max="120" required> 
       <span class="help-block" style="color:red" ng-show="signupForm.age.$dirty && signupForm.age.$invalid"> 
           <span style="color:red" ng-show="signupForm.age.$error.required">Required!</span> 
       <span style="color:red" ng-show="signupForm.age.$error.min">Minimum 14</span> 
       <span style="color:red" ng-show="signupForm.age.$error.max">Invalid Age!</span> 
       </span> 
      </div> 
      <div class="form-group col-sm-6 col-xs-6 remove-all-padding sex-group pull-right"> 
       <label class="form-tags-info-page" for="sex">Sex</label> 
       <br> 
       <select class="form-control" id="input-elements-info-page" ng-model="myForm.sex" required> 
        <option value="" selected disabled>Select Sex</option> 
        <option value="Male">Male</option> 
        <option value="Female">Female</option> 
       </select> 
      </div> 
     </div> 
     <div class="form-group" ng-class="{ 'has-error' : submitted && signupForm.ownership.$invalid }"> 
      <label class="form-tags-info-page">Ownership</label> 
      <select name="ownership" data-ng-model="myForm.ownership" id="input-elements-info-page" placeholder="Select Annual Income" class="form-control" required> 
       <option value="" selected disabled>Select Ownership</option> 
       <option value="Owner">Owner</option> 
       <option value="Successor">Successor</option> 
       <option value="Blood-relative">Blood-relative</option> 
       <option value="Contract-farmer">Contract-farmer</option> 
      </select> 
      <div ng-show="submitted && signupForm.ownership.$invalid" class="help-block"> 
       <p ng-show="signupForm.ownership.$error.required">Annual Income is required</p> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="form-tags-info-page" for="name">Father's Name</label> 
      <br> 
      <input class="form-control" id="input-elements-info-page" placeholder="father's name" type="text" name="fname" ng-pattern="/^[a-zA-Z0-9\-\s\,]{1,100}$/" ng-model="myForm.fathername" required> 
      <div class="help-block"> 
       <p style="color: red" ng-show="signupForm.fname.$dirty && signupForm.fname.$touched && signupForm.fname.$error.required">Father's Name is required</p> 
       <p style="color: red" ng-show="signupForm.fname.$dirty && signupForm.fname.$touched && signupForm.fname.$error.pattern">Enter a valid Father's Name</p> 
      </div> 
     </div> 
     <div class="form-group" ng-class="{ 'has-error' : submitted && signupForm.mobile_no.$invalid }"> 
      <label class="form-tags-info-page" for="mobile">Mobile Number</label> 
      <br> 
      <input class="form-control" id="input-elements-info-page" type="number" name="mobile_no" placeholder="Mobile No" ng-model="myForm.mobile_no" ng-minlength="10" ng-maxlength="10" ng-pattern="/^[7-9]{1}[0-9]{9}/" required> 
      <span class="help-block" style="color:red" ng-show="signupForm.mobile_no.$dirty && signupForm.mobile_no.$invalid"> 
          <span style="color:red" ng-show="signupForm.mobile_no.$error.required">Required!</span> 
      <span style="color:red" ng-show="signupForm.mobile_no.$error.minlength">Too short!</span> 
      <span style="color:red" ng-show="signupForm.mobile_no.$error.maxlength">Too long!</span> 
      <span style="color:red" ng-show="signupForm.mobile_no.$error.pattern">Invalid Mobile Number</span> 
      </span> 
     </div> 

     <div class="form-group" ng-class="{ 'has-error' : submitted && signupForm.alt_mobile_no.$invalid }"> 
      <label class="form-tags-info-page" for="mobile">Alternate Mobile Number</label> 
      <br> 
      <input class="form-control" id="input-elements-info-page" type="number" name="alt_mobile_no" placeholder="Alternate Mobile No" ng-model="myForm.alt_mobile_no" ng-minlength="10" ng-maxlength="10" ng-pattern="/^[7-9]{1}[0-9]{9}/" required> 
      <span class="help-block" style="color:red" ng-show="signupForm.alt_mobile_no.$dirty && signupForm.alt_mobile_no.$invalid"> 
          <span style="color:red" ng-show="signupForm.alt_mobile_no.$error.required">Required!</span> 
      <span style="color:red" ng-show="signupForm.alt_mobile_no.$error.minlength">Too short!</span> 
      <span style="color:red" ng-show="signupForm.alt_mobile_no.$error.maxlength">Too long!</span> 
      <span style="color:red" ng-show="signupForm.alt_mobile_no.$error.pattern">Invalid Mobile Number</span> 
      </span> 
     </div> 
     <div class="form-group"> 
      <label class="form-tags-info-page" for="email">Email Id(optional)</label> 
      <br> 
      <input class="form-control" id="input-elements-info-page" placeholder="Email" type="email" ng-pattern="/^[A-Za-z]+[a-z0-9._][email protected][a-z]+\.[a-z.]{2,5}$/" ng-model="myForm.email"> 
      <div class="help-block"> 
       <p style="color: red" ng-show="signupForm.email.$dirty && signupForm.email.$touched && signupForm.email.$error.pattern">Enter a valid email address</p> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="form-tags-info-page" for="size">Family Size</label> 
      <br> 
      <select class="form-control" id="input-elements-info-page" ng-model="myForm.family_size" required> 
       <option value="" selected disabled>Select Family Size</option> 
       <option value="1">1</option> 
       <option value="2">2</option> 
       <option value="3">3</option> 
       <option value="4">4</option> 
       <option value="5">5</option> 
       <option value="6">6</option> 
       <option value="7">7</option> 
       <option value="8">8</option> 
       <option value="9">9</option> 
       <option value="10">&gt;10</option> 
      </select> 
     </div> 
     <form class="form-inline col-sm-12 col-xs-12 remove-all-padding"> 
      <div class="form-group col-sm-6 col-xs-6 age-group remove-all-padding"> 
       <label class="form-tags-info-page" for="land">LandArea</label> 
       <br> 
       <input class="form-control" id="input-elements-info-page" style="width:100%;" type="number" required ng-model="myForm.l_area"> 
      </div> 
      <div class="form-group col-sm-6 col-xs-6 remove-all-padding sex-group pull-right"> 
       <label class="form-tags-info-page" for="size">Unit</label> 
       <br> 
       <select class="form-control" id="input-elements-info-page" style="width:100%;" ng-model="myForm.area_unit" required> 
        <option value="" selected disabled>Select Unit</option> 
        <option value="Acre">Acre</option> 
        <option value="Hactare">Hactare</option> 
        <option value="Bigha">Bigha</option> 
       </select> 
      </div> 
     </form> 
     <div class="form-group"> 
      <label class="form-tags-info-page" for="size">Language Preference</label> 
      <br> 
      <select class="form-control" id="input-elements-info-page" ng-model="myForm.language" required> 
       <option value="" selected disabled>Select Language</option> 
       <option value="english">English</option> 
       <option value="hindi">Hindi</option> 
       <option value="others">Others</option> 
      </select> 
     </div> 
     <form class="form-inline col-sm-12 col-xs-12 remove-all-padding"> 
      <div class="form-group col-sm-6 col-xs-6 remove-all-padding "> 
       <label class="form-tags-info-page col-sm-12 col-xs-12" for="uid_type">ID Type</label> 
       <br> 
       <select class="form-control col-sm-12 col-xs-12" id="input-elements-info-page" style="width:100%;" ng-model="myForm.farmerid_type"> 
        <option value="" selected disabled>Select id Type</option> 
        <option value="Aadhar">Aadhar</option> 
        <option value="VoterID">VoterID</option> 
        <option value="Driving Licence">Driving Licence</option> 
       </select> 
      </div> 
      <div class="form-group col-sm-6 col-xs-6 remove-all-padding sex-group"> 
       <label class="form-tags-info-page" for="uid_no">ID No.</label> 
       <br> 
       <input class="form-control" id="input-elements-info-page" type="text" style="width:100%;" ng-model="myForm.farmeruid_no" required> 
      </div> 
     </form> 
     <div class="col-sm-12 col-xs-12 remove-all-padding"> 
      <div class="col-sm-12 col-xs-12 camera-img-wrapp"> 
       <div class="col-sm-6 col-xs-6"> <span ng-click="takePic()" class="glyphicon glyphicon-camera camera-pic"></span> 

       </div> 
       <div class="col-sm-6 col-xs-6"> <span ng-click="takeScan();" class="glyphicon glyphicon-camera camera-pic"></span> 

       </div> 
      </div> 
      <div class="col-sm-12 col-xs-12"> 
       <div class="col-sm-6 col-xs-6" style="text-align:center;font-weight:bold;"> 
        <p class="form-tags-info-page">Take Pic</p> 
       </div> 
       <div class="col-sm-6 col-xs-6" style="text-align:center;font-weight:bold;"> 
        <p class="form-tags-info-page">Take Scan</p> 
       </div> 
      </div> 
     </div> 
     <div class="form-group col-sm-12 col-xs-12 remove-all-padding" ng-show="imageSrc || scanSrc"> 
      <div class="col-sm-4 col-xs-4 col-sm-offset-2 col-xs-offset-2"> <span ng-show="imageSrc"><img src="" id="myImage" style="width:100px;height:100px;"></span> 

      </div> 
      <div class="col-sm-4 col-xs-4 col-sm-offset-2 col-xs-offset-2"> <span ng-show="scanSrc"><img src="" id="myScan" style="width:100px;height:100px;"></span> 

      </div> 
     </div> 
     <div class="form-group col-sm-12 col-xs-12"> 
      <div class="btn-group btn-next"> 
       <input class="btn btn-primary btn-lg" type="submit" value="Next"> 
      </div> 
     </div> 
    </div> 
</form> 

на создание андроида имя приложения поля, Отчество запаздывают. они показывают данные, которые мы вводим через несколько секунд, что слишком много.

+1

@ FrédéricHamidi Я опубликовал файл html, в котором проблема в будущем .. – ashishkumar148

ответ

1

Поскольку вы не очень подробно разбираетесь в своем вопросе, я не могу подробно остановиться на своем ответе.

Больная попытка объяснить, где ваши вопросы могут прийти от и настроить свой ответ, если вы предоставить более подробную информацию:

Кордова использует WebView контейнера в родном приложении, которое основно использует тот же движок для рендеринга в мобильном браузере. Узкое место работы браузеров - это доступ к элементам DOM (вызывающим оплату и рендеринг). Поэтому вы должны быть очень осведомлены о проблемах с производительностью, которые могут создать связь с DOM api. Если ваши изменения DOM занимают более 16 мс, чтобы ваше приложение стало заметно медленным и вялым. Спустившись с 60 кадров в секунду, ваши проблемы с производительностью становятся все более очевидными для пользователя.

Поскольку мобильные устройства намного медленнее, чем настольные компьютеры, вам придется очень осторожно относиться ко многим вещам.

Есть много хакеров, которые вы можете применить к своему мобильному веб-приложению.

вот некоторые из них: https://quickleft.com/blog/4-steps-to-minimizing-rendering-issues-in-cordova-applications/

С ReactJs и злоупотреблению CSS переходов вы можете achive ~ 60fps приложения, которые почти кажутся родными. Я хорошо поработал с этим.

EDIT1: Мой совет: Восстановите свой Frontend с помощью ReactJs и избегайте чрезмерного использования фреймов. Держите свою структуру DOM в чистоте и делайте анимацию с помощью CSS (старайтесь избегать js-анимации столько, сколько сможете!). Измерить свой FPS во время разработки и сразу же найти проблемы с производительностью. Чтобы создать отличное приложение nativelike для исполнителей, вы не найдете способа использовать этот подход.

Надеюсь, это помогло.

+0

страница изменяется соответствующим образом, основная проблема - это поля ввода, которые не показывают данные, которые мы вводим одновременно, и на это уходит время, чтобы показать их. – ashishkumar148

+0

Нужно ли начинать гадать, чтобы уточнить? Вы даже не применяете строку кода. Первоначальная структура DOM, скорее всего, не имеет ничего общего с вашей проблемой. –

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