So halten Sie die Bildschirmposition während der Eingabe an die Eingabe außerhalb des Containers

Question

Ich stehe vor einem Problem mit dem Eingabe-/Textbereichselement in absoluter Position, das halb außerhalb des Containers platziert ist. Die Bildschirmposition scheint dem Caret zu folgen, aber ich würde wirklich gerne in der Lage sein, einen Teil des Textes außerhalb des Elternelements zu schreiben und zu verstecken. Gibt es eine Möglichkeit, den Bildlauf beim Schreiben außerhalb des Containers zu deaktivieren? Es wäre perfekt, wenn der eingegebene Text auch nicht scrollen würde, verstecken Sie einfach, was auch immer außerhalb des Eltern- und Eingabefeldes eingegeben wird.

es besser zu erklären Ich habe ein fiddle

.wrapper { 
 
\t width : 200px; 
 
\t height: 150px; 
 
\t position: relative; 
 
\t overflow: hidden; 
 
\t border :1px solid #ccc; 
 
} 
 
input.test1 { 
 
\t position: absolute; 
 
\t top: 50px; 
 
\t left: 5px; 
 
\t width: 250px; 
 
\t 
 
} 
 
input.test2 { 
 
\t position: absolute; 
 
\t top: 10px; 
 
\t left: 90px; 
 
\t width: 150px; 
 
}

<div class='wrapper'> 
 

 
<input type="text" class="test1" /> 
 
<input type="text" class="test2" /> 
 

 
</div>

Answer 1

Try this:

$('.wrapper').on('scroll', function() { 
 
    $('.wrapper').scrollLeft(0); 
 
});

.wrapper { 
 
\t width : 200px; 
 
\t height: 150px; 
 
\t position: relative; 
 
\t overflow: hidden; 
 
\t border :1px solid #ccc; 
 
} 
 
input.test1 { 
 
\t position: absolute; 
 
\t top: 50px; 
 
\t left: 5px; 
 
\t width: 250px; 
 
\t 
 
} 
 
input.test2 { 
 
\t position: absolute; 
 
\t top: 10px; 
 
\t left: 90px; 
 
\t width: 150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='wrapper'> 
 

 
<input type="text" class="test1" /> 
 
<input type="text" class="test2" /> 
 

 
</div>

Answer 2

Sind Sie wollen zu beheben, den Abstand auf die Eingabefelder erstellt? Wenn ja, habe ich nur ein Leerzeichen zwischen "Eingabe" und "Test1" und "Test2" eingefügt. Dies würde das Problem beheben, dass das erste Textfeld halbwegs vom div entfernt ist.

.wrapper { 
 
\t width : 200px; 
 
\t height: 150px; 
 
\t position: relative; 
 
\t overflow: hidden; 
 
\t border :1px solid #ccc; 
 
} 
 
input .test1 { 
 
\t position: absolute; 
 
\t top: 50px; 
 
\t left: 5px; 
 
\t width: 250px; 
 
\t 
 
} 
 
input .test2 { 
 
\t position: absolute; 
 
\t top: 10px; 
 
\t left: 90px; 
 
\t width: 150px; 
 
}

<div class='wrapper'> 
 

 
<input type="text" class="test1" /> 
 
<input type="text" class="test2" /> 
 

 
</div>