I can not write any value from input on mobile device

Question

I have a problem with touchstart in my jquery code. My jquery code doesn't allow me to click any button, input or other elements when I open the page with a mobile phone.

Please click this DEMO . You can click the inputs and you can write something on there. But open chrome developer console now click the input box so you can see the problem on there. You can not click the input box. you can not write First name and last name.

What is the problem here and how can i fix this problem ? Anyone can help me here please ?

(function(b) {
  b.fn.XSwitch = function(d) {
    return this.each(function() {
      var f = b(this),
        e = f.data("XSwitch");
      if (!e) {
        e = new c(f, d);
        f.data("XSwitch", e);
      }
      if (b.type(d) === "string") {
        return e[d]();
      }
    });
  };

  b.fn.XSwitch.defaults = {
    selectors: {
      sections: ".sections",
      section: ".section",
      page: ".pages",
      active: ".active"
    },
    index: 0,
    easing: "ease",
    duration: 500,
    loop: false,
    pagination: true,
    keyboard: true,
    direction: "vertical",
    callback: ""
  };

  var a = (function(e) {
    var h = ["webkit", "moz", "o", "ms"],
      g = "";
    for (var f = 0, d = h.length; f < d; f++) {
      g = h[f] + "Transition";
      if (e.style[g] !== undefined) {
        return "-" + h[f].toLowerCase() + "-";
      }
      return false;
    }
  })(document.createElement("div"));

  var c = (function() {
    function g(j, i) {
      this.settings = b.extend(true, b.fn.XSwitch.defaults, i);
      this.element = j;
      this.init();
    }

    g.prototype = {
      init: function() {
        var i = this;
        this.selectors = this.settings.selectors;
        this.sections = this.element.find(this.selectors.sections);
        this.section = this.sections.find(this.selectors.section);
        this.direction = this.settings.direction === "vertical" ? true : false;
        this.pagesCount = this.pagesCount();
        this.index =
          this.settings.index >= 0 && this.settings.index < this.pagesCount ?
          this.settings.index :
          0;
        this.canScroll = true;
        if (!this.direction) {
          d(i);
        }
        if (this.settings.pagination) {
          h(i);
        }
        f(i);
      },
      pagesCount: function() {
        return this.section.length;
      },
      switchLength: function() {
        return this.duration ? this.element.height() : this.element.width();
      },
      prve: function() {
        var i = this;
        if (this.index > 0) {
          this.index--;
        } else {
          if (this.settings.loop) {
            this.index = this.pagesCount - 1;
          }
        }
        e(i);
      },
      next: function() {
        var i = this;
        if (this.index < this.pagesCount) {
          this.index++;
        } else {
          if (this.settings.loop) {
            this.index = 0;
          }
        }
        e(i);
      }
    };

    function d(k) {
      var j = k.pagesCount * 100 + "%",
        i = (100 / k.pagesCount).toFixed(2) + "%";
      k.sections.width(j);
      k.section.width(i).css("float", "left");
    }

    function h(o) {
      var n = o.selectors.page.substring(1),
        l = '<ul class="' + n + '">';
      o.activeClass = o.selectors.active.substring(1);
      for (var m = 0, k = o.pagesCount; m < k; m++) {
        l += "<li></li>";
      }
      l += "</ul>";
      o.element.append(l);
      var j = o.element.find(o.selectors.page);
      o.pageItem = j.find("li");
      o.pageItem.eq(o.index).addClass(o.activeClass);
      o.section.find('.box').removeClass('box_active');
      o.section.eq(o.index).find('.box').addClass('box_active');
      if (o.direction) {
        j.addClass("vertical");
      } else {
        j.addClass("horizontal");
      }
    }

    function f(i) {
      i.element.on("click touchstart", i.selectors.page + " li", function() {
        i.index = b(this).index();
        e(i);
      });
      i.element.on("mousewheel DOMMouseScroll", function(j) {
        if (!i.canScroll) {
          return;
        }
        var k = -j.originalEvent.detail ||
          -j.originalEvent.deltaY ||
          j.originalEvent.wheelDelta;
        if (k > 0 && ((i.index && !i.settings.loop) || i.settings.loop)) {
          i.prve();
        } else {
          if (
            k < 0 &&
            ((i.index < i.pagesCount - 1 && !i.settings.loop) ||
              i.settings.loop)
          ) {
            i.next();
          }
        }
      });

      i.element.on("touchstart", function(l) {
        var k = l.originalEvent.changedTouches[0].pageX,
          j = l.originalEvent.changedTouches[0].pageY;
        i.element.one("touchend", function(o) {
          if (!i.canScroll) {
            return;
          }
          var n = o.originalEvent.changedTouches[0].pageX,
            m = o.originalEvent.changedTouches[0].pageY,
            p = m - j;
          if (p > 50) {
            i.prve();
          } else {
            if (p < -50) {
              i.next();
            }
          }
        });
        l.preventDefault();
      });

      if (i.settings.keyboard) {
        b(window).on("keydown", function(k) {
          var j = k.keyCode;
          if (j === 37 || j === 38) {
            i.prve();
          } else {
            if (j === 39 || j === 40) {
              i.next();
            }
          }
        });
      }

      b(window).resize(function() {
        var j = i.switchLength(),
          k = i.settings.direction ?
          i.section.eq(i.index).offset().top :
          i.section.eq(i.index).offset().left;
        if (Math.abs(k) > j / 2 && i.index < i.pagesCount - 1) {
          i.index++;
        }
        if (i.index) {
          e(i);
        }
      });

      i.sections.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend", function() {
        i.canScroll = true;
        if (i.settings.callback && type(i.settings.callback) === "function") {
          i.settings.callback();
        }
      });
    }

    function e(l) {
      var i = l.section.eq(l.index).position();
      l.section.find('.box').removeClass('box_active');
      l.section.eq(l.index).find('.box').addClass('box_active');

      if (!i) {
        return;
      }

      l.canScroll = false;
      if (a) {
        l.sections.css(
          a + "transition",
          "all " + l.settings.duration + "ms " + l.settings.easing
        );
        var j = l.direction ?
          "translateY(-" + i.top + "px)" :
          "translateX(-" + i.left + "px)";
        l.sections.css(a + "transform", j);
      } else {
        var k = l.direction ? {
          top: -i.top
        } : {
          left: -i.left
        };
        l.sections.animate(k, l.settings.duration, function() {
          l.canScroll = true;
          if (l.settings.callback && type(l.settings.callback) === "function") {
            l.settings.callback();
          }
        });
      }
      if (l.settings.pagination) {
        l.pageItem
          .eq(l.index)
          .addClass(l.activeClass)
          .siblings("li")
          .removeClass(l.activeClass);
      }
    }
    return g;
  })();

  $(function() {
    $("[data-XSwitch]").XSwitch();
  });
})(jQuery);

$("#container").XSwitch({
  duration: 1000
});

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

#container,
.sections,
.section {
  position: relative;
  height: 100%;
}

.section {
  background-color: #000;
  background-size: cover;
  background-position: 50% 50%;
}

#section0 {
  background-image: url(https://unsplash.it/1980/1280?image=1076);
}

#section1 {
  background-image: url(https://unsplash.it/1980/1280?image=1075);
}

#section2 {
  background-image: url(https://unsplash.it/1980/1280?image=1074);
}

#section3 {
  background-image: url(https://unsplash.it/1980/1280?image=1073);
}

.pages {
  position: fixed;
  right: 10px;
  top: 50%;
  list-style: none;
}

.pages li {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  margin: 15px 0 0 7px;
}

.pages li.active {
  margin-left: 0;
  width: 14px;
  height: 14px;
  border: 4px solid #FFFFFF;
  background: none;
}

.form {
  left: 50%;
  margin-left: -400px;
  position: absolute;
  top: 50%;
  width: 800px;
  margin-top: -241px;
  padding: 20px 30px 30px;
  z-index: 5;
  vertical-align: baseline;
  animation: signupFormIntro 0.3s ease-out 0.7s;
  animation-fill-mode: backwards;
}

.input_box {
  width: 100%;
  display: inline-block;
}

.wellcome_input {
  width: 100%;
  padding: 15px;
  font-weight: 300;
  font-size: 16px;
  outline: none;
  border: 0px solid transparent;
  color: #444;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" data-xswitch="">
  <div class="sections">
    <div class="section box" id="section0">
      <div class="form">
        <div class="input_box"><input type="text" class="wellcome_input" placeholder="First Name"></div>
        <div class="input_box"><input type="text" class="wellcome_input" placeholder="Last Name"></div>
      </div>
    </div>
    <div class="section" id="section1"></div>
    <div class="section" id="section2"></div>
    <div class="section" id="section3"></div>
  </div>
</div>

Answer 1

If you touch the text input, all parent elements are touched too.

In this case i.element is also touched when you touch the text input. l.preventDefault() is preventing the default behavior on i.element and all its children. Resulting in not activating the text input.

Remove l.preventDefault(). I don't see the need for it in this case anyway.

I copied and edited your CodePen so you can see that it works!

i.element.on("touchstart", function(l) {
    var k = l.originalEvent.changedTouches[0].pageX,
    j = l.originalEvent.changedTouches[0].pageY;
    i.element.on("touchend", function(o) {
        if (!i.canScroll) {
            return;
        }
        var n = o.originalEvent.changedTouches[0].pageX,
        m = o.originalEvent.changedTouches[0].pageY,
        p = m - j;
        if (p > 50) {
            i.prve();
        } else {
            if (p < -50) {
                i.next();
            }
        }
    });
    // l.preventDefault();
});

Answer 2

l.preventDefault(); is preventing other default events from firing. If you remove this, your code should work.