I have create some prepopulated text in a text fiel that is read only however I want to be able to add text after it

35
October 09, 2019, at 4:40 PM

I have create some prepopulated text in a text field that is read only however I want to be able to add text after it in jquery. Attached works perfectly fine for readonly. I want to maintain this along with giving the user to ability to input text after the readonly section.

All text should fall in the field of #ctl00_Content_ctl00_txtQuestion

$(document).ready(function() {
  $("#ctl00_Content_ctl00_txtQuestion").attr('readonly', true);
Answer 1

There's no built-in way to do that, so you'll have to create kind of a fake input, that looks like one input field visually, but actually is a wrapper containing some text and the actual input. As different browsers might have different default styling, but you'll want to make sure that all your inputs (the real ones and your fake ones) look the same, you should pick a style that fits your design and apply it to both types.

Don't forget to set a :focus style for accessibility. I solved this using :focus-within in this demonstration, but depending on the browser support that you need, you might have to solve this via some additional JS/jQuery, setting a focus class on the .fake-input wrapper when the input inside is being focused, and removing this class on blur.

When submitting the form, you'll have to prepend the readonly text to the actual input contents.

.fake-input, input[type="text"] { 
  border: solid black 1px; 
  padding: 2px 5px; 
} 
 
.fake-input { 
  display: inline-block; 
} 
 
.fake-input input[type="text"] { 
  border: 0 none; 
  padding: 0; 
} 
 
.fake-input label { 
  cursor: text; 
} 
 
.fake-input:focus-within, input[type="text"]:focus { 
  border-color: #0095ff; 
} 
 
 
input[type="text"], .fake-input label { 
 font-family: serif; 
 font-size: 16px; 
}
<span class="fake-input"><label>readonly text base <input id="ctl00_Content_ctl00_txtQuestion_actualText" type="text"></label></span> 
 
<input type="text" placeholder="This is a standard text input for comparison" style="width: 300px">

READ ALSO
How to login a specific user to selected activity

How to login a specific user to selected activity

This app can register 2 main users student and teacher after registering the users they can login if the user is a teacher there will be a toast msg saying teacher if it's a student there will be a toast saying student in the register page student and teacher...

51
How can I load an image from URL without extension

How can I load an image from URL without extension

I'd like to load an image from a URL but it doesn't work because the link doesn't have an extension Can this be solved??? URL example : http://d1s5a4e3za7rnicloudfront

33
How to get value from TypedArray without passing default value

How to get value from TypedArray without passing default value

I'm using the below code to retrieve values from TypedArray in a custom view, but there is something I don't getIf I'm passing default style as 4th parameter then why I have to use getXXXX(R

33
How do you track screens as pages on Google Analytics? (website view using app data)

How do you track screens as pages on Google Analytics? (website view using app data)

We have an Android app we'd like to track pages using Google Analytics withI've integrated the Google Analytics SDK through Play Services 17

35