0

What I am trying is if a user has entered a value with multiple spaces I want them to copy it to a span. But the issues is span eliminates all spaces. So how can I achieve this functionality.

What I have tried;

Fiddle

Html

<span class="span"></span><br>
<input  type="text" value="1               1" />

CSS

$(document).ready(function(){
    var inputVal = $('input').val();
    $('.span').text(inputVal);
});
Aamir Shahzad
  • 6,683
  • 8
  • 47
  • 70

5 Answers5

2

Browser will trim double spaces by default, so you won't see them render.

You will need to replace the spaces with &nbsp; and you will get the desired results.

$(".span").html(inputVal.replace(/ /g,"&nbsp;"));

This code just replaces all the spaces with &nbsp; and it works here:

http://jsfiddle.net/8numkeuu/12/

Control Freak
  • 12,965
  • 30
  • 94
  • 145
2

Try

css

.span {
    white-space:pre;
}


$(document).ready(function(){
    var inputVal = $('input').val();
    $('.span').text(inputVal);
});
.span {
    white-space:pre;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="span"></span><br>
<input  type="text" value="1               1" />

http://jsfiddle.net/guest271314/8numkeuu/14/

guest271314
  • 1
  • 15
  • 104
  • 177
1

Use <pre></pre> tag into your span.

Because HTML doesn't show spaces on front end without pre tag.

Your code is correct and getting values with space

check here:

HTML:

<span class="span"><pre></pre></span><br>
<input  type="text" value="1               1" />

jquery:

$(document).ready(function(){
    var inputVal = $('input').val();
    $('.span pre').text(inputVal);
});

http://jsfiddle.net/8numkeuu/11/

Mr7-itsurdeveloper
  • 1,631
  • 2
  • 17
  • 24
1
$(document).ready(function(){
    var inputVal = $('input').val();

    $('.span').html("<pre>"+inputVal+"<pre>");
});

This code is tested on Fiddle.

Nitin Kaushal
  • 211
  • 1
  • 7
  • Preformatted text between the start and end PRE tag is rendered using a fixed with font, in addition whitespace characters are treated literally. The spacing and line breaks are rendered directly, unlike other elements, for which repeated whitespace chararacters are collapsed to a single space character and line breaks introduced automatically. – Nitin Kaushal Sep 26 '14 at 09:19
  • Here is the Example 
           Higher still and higher
         From the earth thou springest
       Like a cloud of fire;
         The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
    which is rendered as: Higher still and higher From the earth thou springest Like a cloud of fire; The blue deep thou wingest, And singing still dost soar, and soaring ever singest.     – Nitin Kaushal Sep 26 '14 at 09:19
1

Refer Why do multiple spaces in an HTML file show up as single spaces in the browser? for better understanding

Replacing spaces with &nbsp will resolve the issue.

Community
  • 1
  • 1
Manoj Namodurai
  • 529
  • 2
  • 7